liferay-npm-bundler’s mechanism is inspired by webpack. Like webpack, the liferay-npm-bundler processes files with a set of rules, which includes loaders that transform a project’s source files before producing the final output.
Loaders are npm packages that export a function in their main module, which receives source files and returns modified files, and optionally new files, based on the loader’s configuration. For example, the babel-loader receives ES6+ JavaScript files, runs Babel on them, and returns transpiled ES5 files along with a generated source map. You can use this simple pattern to create custom loaders. A few example loader functions are shown below:
- Pass JS files through Babel or TSC
- 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 IDL files
Loaders are configured via the project’s .npmbundlerrc file. A loader’s
configuration is specified with two key options: sources
(the folders that contain the sources files to process) and 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. Files are processed by the loaders in the order in which
they are listed in the use property. The files are passed to the first loader,
processed, sent to the next loader, and so on and so forth, until the files are
processed by the rules. This lets you run complex processes, such as converting
a SASS file into CSS with the sass-loader, and then convert it into a JavaScript
module with the style-loader. Once the rules are applied, the
liferay-npm-bundler continues with the pre, post, and babel phases of the
bundler plugins.