webpack loader use

In this section, we will learn webpack to use the loader loader in 060f054822b134, so what is loader . In essence, loader is a Node.js modules, in webpack defined, loader export a function, loader calls this function when converting source module.

webpack itself can still only process JS files, but through a series of loader , other files can be processed. For example Less and Sass , before we compile the CSS preprocessor, you need gulp compiled, and the display can webpack in loader to achieve loader.

Common loaders

webpack are a series of loader in 060f054822b1c5. In actual projects, we will use different loader according to different needs. E.g. webpack Some common loader follows:

• css-loader : Used to process the css file, so that it can be introduced and used js
• style-loader : for css injected into the file index.html in <style> on the label.
• less-loader : Process less code.
• sass-loader : Process sass code.
• postcss-loader : Use postcss to process CSS code.
• babel-loader : Use babel to convert ES6 files to ES5.
• file-loader : Pack pictures, pack font icons.
• url-loader : file-loader , but when the file is smaller than the set limit , it can return a DataUrl (improve web page performance).
• html-withimg-loader : Package the pictures in the HTML file.
• eslint-loader : Used to check common JavaScript code errors, and can also perform "code specification" checks.

loader installation and configuration

We can webpack.config.js configuration profile loader , can module.rules specify one or more of the loader .

This is achieved by configuring two attributes of loader

• test attribute: used to identify one or more files loader
• use attribute: which loader to use when converting.

Example:

For example, by default, webpack can only package JS files and cannot recognize other types of files such as CSS, Less, image, etc., so if we want to package CSS style files, we can use the loader webpack , which can convert a file to another document, the webpack not recognize other types of files into webpack recognizable type JS file.

First, you need to install style-loader and css-loader , the installation command is as follows:

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

After the command is executed successfully, the two loader will be automatically added to package.json , 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 webpack.config.js configuration loader , in module properties rule configuration properties loader rules:

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

This means that all files that match the end of the .css style-loader and css-loader loader before compiling.

Then we create a xkd.css file, the content is as follows:

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

xkd.css import the 060f054822b590 file into the index.js entry file:

document.write('你好，侠课岛！');

// 导入 CSS 文件
import "./xkd.css";

Then we will regenerate the packaging file after executing the packaging command, and we will find that the xkd.css file has also been successfully packaged into the bundle.js file.

This is loader basic use of the process, install loader , then the configuration in the configuration file loader , and finally packaged to be all right.

Loader features

• loader supports chained calls. Each loader in the chain will apply the conversion to the processed resources. A set of chained loader will be executed in reverse order. loader in the chain passes its result to the next loader , and so on.
• loader can be synchronous or asynchronous.
• loader runs in Node.js and can perform any operation.
• loader can also be specified inline.
• loader can be options object.
• In addition to the common use of package.json of main to npm module as loader , you can also use the loader module.rules to directly reference a module.
• Plugins can bring more features loader
• loader can generate additional arbitrary files.