Default Bundler Loaders
Several loaders are available for the liferay-npm-bundler by default:
babel-loader
: processes source files with Babel. This avoids an extra build step before the bundler.copy-loader
: copies source files (static assets) to the output folder.css-loader
: converts a CSS file into a JavaScript module that’s inserted into the DOM once it’s loaded.json-loader
: generates JavaScript modules that export the contents of a JSON file as an object, so you can include JSON files with therequire()
call.sass-loader
: runsnode-sass
orsass
on source files, so you can generate static CSS files. It can be chained beforestyle-loader
.style-loader
: converts a CSS file into a JavaScript module that inserts the CSS contents into the DOM once it’s loaded. Then you can include CSS files with arequire()
call.
See the liferay-js-toolkit loaders showcase for an example use case of the liferay-npm-bundler’s loaders. If the default loaders don’t meet your requirements, you can follow the instructions in Creating Custom Loaders for the Bundler to create your own loaders.