What is the role of loader in Webpack? What are the commonly used loaders?

Let’s talk about common Loaders in webpack? What problem was solved? - Question details - Front-end interview questions guide

1. What is loader? 

Loader is one of the most important parts of webpack.

By using different loaders, we can call external scripts or tools to process files in different formats.

The loader needs to be configured separately with module in webpack.config.js.

Within webpack, any file is a module, not just jsfiles. By default, when encountering import or load loading modules, webpack only supports packaging js files. When it comes to files of these types such as css, sass, png, etc., webpack cannot do anything. At this time, you need to configure the corresponding loader. Parsing of file contents.

When loading a module, the execution sequence is as follows: 

​

When webpack encounters an unrecognized module, webpack will look for the file parsing rules in the configuration.

There are three ways to configure the loader:

• Configuration method (recommended): Specify the loader in the webpack.config.js file
• Inline mode: explicitly specify the loader in each import statement
• CLI way: specify them in shell command

Regarding the configuration of the loader, we write it in  the module.rules  attribute. The attributes are introduced as follows:

• rules  is in the form of an array, so we can configure many loaders 

• Each loader corresponds to the form of an object. The object attribute test  is the matching rule, which is generally a regular expression.

• The use  attribute calls the corresponding loader for processing if it matches the file type.

Code is written in the following form:

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

As you can see from the above code, when processing the css module, three loaders are configured in the use  attribute to process the css files respectively.

Because loaders support chain calls, each loader in the chain will process resources that have been processed before and eventually become js code.

The order is the reverse order , that is, the above execution method is  sass-loader, css-loader,style-loader

The same task  loader can be mounted multiple times at the same time. The processing order is: from right to left, from bottom to top.

Because webpack chooses  a functional programming method like compose , expressions in this method are executed from right to left.

In addition, loader its features are as follows:

• Loaders can be synchronous or asynchronous
• The loader runs in Node.js and can perform any operation
• In addition to the common way of  package.json exporting  main an npm module as a loader, you can also use fields in module.rules to  loader directly reference a module.
• Plugins can bring more features to loaders
• The loader can generate additional arbitrary files

You can provide more capabilities to the JavaScript ecosystem through loader preprocessing functions. Users now have more flexibility to introduce fine-grained logic such as compression, packaging, language translation and many other features.

2. Loader function

① Achieve processing of files in different formats, such as converting Scss to CSS, or converting TypeScript to Javascript;

② Files can be compiled so that they can be added to dependencies

3. Commonly used loaders 

css-loader:   loads CSS, supports modularization, compression, file import and other features;

style-loader: Mount the parsed css  style into the page using tags  head ;

If you only load the file through  css-loader  , the style set by the page code will not take effect at this time.

The reason is that  css-loader  is only responsible for  .css parsing the file and does not insert the parsed file into the page. If we want to complete the insertion operation, then we need another one , which is  style-loader css  style  loader

less-loader:    Convert LESS code to CSS

sass-loader:   Convert SCSS/SASS code to CSS

During development, we often use  less, sass, and stylus preprocessor writing  css styles to improve development efficiency. Here we need to use  less-loader 、sass-loader

postcss-loader: Extends CSS syntax, uses next-generation CSS, and can automatically complete CSS3 prefixes with the autoprefixer plug-in;

raw-loader:   Import file content  webpack through the method in  , which  is not built-in;importloader

babel-loader : Convert ES6 to ES5 ;

eslint-loader : Check JavaScript code through ESLint;

html-minify-loader : Compress HTML

image-loader : Load and compress image files ;

file-loader : Output the file to a folder, and reference the output file through a relative URL in the code (processing images and fonts);

url-loader : Similar to file-loader, the difference is that the user can set a threshold. If it is greater than the threshold, it will be handed over to the file-loader for processing. If it is less than the threshold, the file content will be injected into the code in the form of base64 (processing pictures and font);

source-map-loader : Load additional Source Map files to facilitate breakpoint debugging

json-loader: used to load JSON data.

html-loader: Processes HTML files and can import images and other resources in HTML files into JavaScript as modules.