webpack-loader mechanism and simulation implementation

Loader is one of the core of webpack. It is used to convert different types of files into webpack-recognizable modules.

use

 module: {
        loaders: [
			{
			    test: /\.css$/,
			    use: ['style-loader']
			},
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
        ]
    }

The difference between loader and plugin

The loader is used to convert the source code of the module, and the purpose of the plug-in is to solve other things that the loader cannot achieve.

The plugin can be called at any stage, can further process Loader's output across Loader, execute pre-registered callbacks, and use the compilation object to do some lower-level things.

Call multiple loaders in a chain

When calling multiple loaders in a chain, remember that they will be executed in reverse order. Depending on the format of the array, it is executed from right to left or from bottom to top.

• The last loader is called the earliest , and the original resource content will be passed in.
• The first loader is called last, and the expected value is the outgoing JavaScript and source map (optional).
• When the middle loader is executed, the result from the previous loader will be passed in.

The webpack resource loading is similar to the work pipeline, multiple loaders can be used, and the output result must be standard js code.

Example:

//webpack.config.js
{
  test: /\.js/,
  use: [
    'bar-loader',
    'foo-loader'
  ]
}

foo-loader is passed into the original resource, bar-loader will receive the output of foo-loader, and return the final converted module (js code) and a source map (optional)

Simulation loader implementation

Simulation one

The loader will process the .txt file and directly replace the [name] in any instance with the name set in the loader option. Then return to the JavaScript module containing the default exported text.

//src/loader.js

import { getOptions } from 'loader-utils';

export default function loader(source) {
  const options = getOptions(this);

  source = source.replace(/\[name\]/g, options.name);

  return `export default ${ JSON.stringify(source) }`;
};

use:

 module: {
      rules: [{
        test: /\.txt$/,
        use: {
          loader: path.resolve(__dirname, '../src/loader.js'),
          options: {
            name: 'Alice'
          }
        }
      }]
    }

Simulation two

Simulate the function of a simple style-loader.

//将css插入到head标签内部
module.exports = function (source) {
    let script = (`
      let style = document.createElement("style");
      style.innerText = ${JSON.stringify(source)};
      document.head.appendChild(style);
   `);
    return script;
}

use

resolveLoader: {
   modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{
    test: /\.css$/,
    use: ['style-loader']
},

Refer to https://www.webpackjs.com/contribute/writing-a-loader/

This article link https://blog.csdn.net/qq_39903567/article/details/115334778