Understanding liferay-npm-bundler's Loaders

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.

Loaders are npm packages that export a function in their main module that 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 pattern to create custom loaders. A few example loader functions are shown below:

  • Pass JavaScript 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 using 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 they are listed in the use property. The files are passed to the first loader, processed, sent to the next loader, and so on, until the files are processed by the rules. You can 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.

« What Changed Between Liferay npm Bundler 1.x and 2.xDefault liferay-npm-bundler Loaders »
Was this article helpful?
0 out of 0 found this helpful