Understanding the Liferay npm Bundler Loader¶
liferay-npm-bundler’s mechanism is inspired by webpack. Like webpack, the liferay-npm-bundler processes files using a set of rules that include loaders that transform a project’s source files before producing the final output.
While webpack creates a single JS bundle file, liferay-npm-bundler targets an AMD loader, so webpack and liferay-npm-bundler loaders are not compatible.
Convert CSS files into JS modules that dynamically inject the CSS into the HTML page
Process CSS files with SASS
Create tools that generate code based on Interface Description Language (IDL) files
Loaders are configured via the project’s
.npmbundlerrc file. A loader’s configuration is specified using two key options:
sources: the folders that contain the sources files to process
rules: the loaders, options—if applicable—and regular expressions that determine which files to process.
See Understanding the
.npmbundlerrc’s Structure for more information on the configuration requirements and options.
Loaders can be chained. Loaders process files in the order they are listed in the