In this section we will learn how to use the loader loader in Webpack. So what is a loader? In essence, a loader is a Node.js module. In the Webpack definition, the loader exports a function that the loader calls when converting the source module.

Webpack itself is still only capable of handling JS files, but through a series of loaders, it can handle other files. For example, Less and Sass. Before we compiled these CSS preprocessors, we needed to use gulp to compile, and the display can be done through the loader loader in Webpack.

Common loader

Webpack has a series of loaders, and in a real project, we will use different loaders according to different requirements. For example, some common loaders in Webpack look like this:

  • css-loader: Used for processingcssFiles that can be used injsIntroduced in the file used.
  • style-loader: used tocssFile injection intoindex.htmlIn the<style>On the label.
  • less-loader: handlinglessThe code.
  • sass-loader: handlingsassThe code.
  • postcss-loader:postcssTo work with CSS code.
  • babel-loader:babelTo convert ES6 files to ES5.
  • file-loader: package the image, package the font icon.
  • url-loaderAnd:file-loaderSimilar, but when the file is smaller than the setlimitYou can return oneDataUrlImprove web performance.
  • html-withimg-loader: Wrap up images in HTML files.
  • eslint-loader: Used to check for common JavaScript code errors. You can also do a “code specification” check.

Loader installation and configuration

Loaders can be configured in the webpack.config.js configuration file and one or more can be specified in module.rules.

This is done by configuring two properties of the loader:

  • testProperty: Used to identify which should be matchedloaderOne or more files to convert.
  • useProperty: Indicates which to use when transformingloader.
Example:

For example, by default Webpack can only package JS files and cannot recognize other files such as CSS, Less, Image, etc. So if we want to package CSS style files, we can use the Loader loader in Webpack to convert one type of file to another. Convert files of other types not recognized by Webpack to JS types recognized by Webpack.

First you need to install style-loader and css-loader. The installation commands are as follows:

npm install css-loader style-loader --save-dev

Upon successful execution of the command, the two loaders are automatically added to the package.json dependency, as shown below:

"DevDependencies" : {" CSS - loader ":" ^ 3.6.0 ", "style - loader" : "^ 1.2.1", "webpack" : "^ 4.43.0", "webpack - dev - server" : "^ 3.11.0}"

Then configure the loader in webpack.config.js and configure the loader rule in the rule property of the module property:

module:{
    rules:[{
        test:/.css$/,
        use:['style-loader','css-loader']
    }]
}

This means that all files that match the end of the.css suffix are converted and compiled by the style-loader and css-loader loaders.

Then we create an xkd.css file that looks like this:

p{
    font-size: 12px;
    color: red;
}

And import the xkd.css file into the index.js entry file:

Document. Write (' Hello, Xia Ke Island! '); // import the CSS file "./xkd.css";

We will then execute the package command and regenerate the package file, and we will see that the xkd.css file has also been successfully packaged into the bundle.js file.

This is the basic process of using a loader. First install the loader, then configure the loader in the configuration file, and finally package it.

Loader features

  • loaderSupports chained calls, each in the chainloaderThe transformation is applied to the processed resource. A set of chainsloaderIt will be executed in the reverse order. The first one in the chainloaderPass its result to the next oneloader“, and so on.
  • loaderIt can be synchronous or asynchronous.
  • loaderIt runs in Node.js and can perform any operation.
  • loaderSpecifications can also be displayed inline.
  • loaderCan be achieved byoptionsObject configuration.
  • Except for the usual passpackage.json 的 mainTo anpmModule is exported asloader, can still be inmodule.rulesThe use ofloaderFields refer directly to a module.
  • Plugins can beloaderBring in more features.
  • loaderThe ability to generate additional arbitrary files.