Webpack5 – loader

Welcome to wechat public account: Front Reading Room

Loader is used to convert the module source code. Loader allows you to preprocess files when importing or “loading” modules. As such, Loader is similar to “tasks” in other build tools and provides a powerful way to handle the front-end build steps. Loader can convert files from different languages (such as TypeScript) to JavaScript or convert inline images to data urls. Loader even allows you to import CSS files directly into JavaScript modules!

The sample

For example, you can use Loader to tell Webpack to load CSS files, or convert TypeScript to JavaScript. To do this, first install the corresponding loader:

npm install --save-dev css-loader ts-loader
Copy the code

Then instruct Webpack to use CSS-loader for each.css and ts-loader for all.ts files:

webpack.config.js

module.exports = {
  module: {
    rules: [{test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader'},],}};Copy the code

Using the loader

There are two ways to use loader in your application:

• Configuration method (recommended) : Specify loader in webpack.config.js.
• Inline: Specify loader explicitly in each import statement.

Configuration mode

Module. rules allows you to specify multiple loaders in a Webpack configuration. This approach is a concise way to present the Loader and helps keep the code concise and maintainable. It also gives you a global overview of each loader:

The loader evaluates/executes from right to left (or bottom to top). In the following example, execution starts with Sas-loader, continues with CSS-loader, and ends with style-loader.

module.exports = {
  module: {
    rules: [{test: /\.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader'.options: {
              modules: true}},// [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader'}]}};Copy the code

inline

You can specify the Loader in an import statement or in any reference equivalent to the “import” method. Use! Separate the loaders in the resource. Each part is resolved relative to the current directory.

import Styles from 'style-loader! css-loader? modules! ./styles.css';
Copy the code

You can override all loaders, preloaders, and postloaders in a configuration by prefixing inline import statements:

Use! Prefix to disable all configured Normal Loaders

import Styles from '! style-loader! css-loader? modules! ./styles.css';
Copy the code

Use!!!!! Prefix to disable all configured loaders (preLoader, loader, postLoader)

import Styles from '!!!!! style-loader! css-loader? modules! ./styles.css';
Copy the code

Use -! Prefix, disables all preloaders and loaders configured, but disables postLoaders

import Styles from '-! style-loader! css-loader? modules! ./styles.css';
Copy the code

Options can pass query parameters, such as? Key =value&foo=bar, or a JSON object, for example? {” key “:” value “, “foo” : “bar”}.

Tip

Use module.rules whenever possible, as this reduces the amount of boilerplate code in the source code and makes debugging and locating loader problems faster when errors occur.

Loader features

• Loader supports chained invocation. Each loader in the chain applies the transformation to the processed resource. A set of chained Loaders will execute in reverse order. The first loader in the chain passes its results (that is, applied resources) to the next loader, and so on. Finally, the last loader in the chain returns the JavaScript that WebPack expects.
• The Loader can be synchronous or asynchronous.
• Loader runs in Node.js and can perform any operation.
• Loaders can be configured using the Options object (options are still supported using the Query argument, but this approach has been deprecated).
• In addition to the usual way of exporting an NPM module as a Loader through package.json’s main, you can also reference a module directly in module.rules using the Loader field.
• Plugins can bring more features to the Loader.
• Loader can generate additional arbitrary files.

You can add more power to the JavaScript ecosystem through loader’s preprocessor functions. Users now have more flexibility to introduce fine-grained logic such as compression, packaging, language translation (or compilation), and many more features.

Parsing the loader

Loader follows standard module resolution rules. In most cases, the loader will be loaded from the module path (usually from NPM install, node_modules).

We expect the Loader module to be exported as a function and written in Node.js-compatible JavaScript. NPM is typically used to manage loaders, but files in an application can also be used as custom loaders. By convention, a loader is usually named xxX-loader (for example, jSON-loader).

Welcome to wechat public account: Front Reading Room