webpack-loader机制以及模拟实现

Loader(加载器) 是 webpack 的核心之一。它用于将不同类型的文件转换为 webpack 可识别的模块。

使用

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

loader和plugin区别

loader是用来对模块的源代码进行转换,而插件目的在于解决 loader 无法实现的其他事。

plugin可以在任何阶段调用,能够跨Loader进一步加工Loader的输出,执行预先注册的回调,使用compilation对象做一些更底层的事情。

链式调用多个loader

当链式调用多个 loader 的时候，请记住它们会以相反的顺序执行。取决于数组写法格式，从右向左或者从下向上执行。

• 最后的 loader 最早调用，将会传入原始资源内容。
• 第一个 loader 最后调用，期望值是传出 JavaScript 和 source map（可选）。
• 中间的 loader 执行时，会传入前一个 loader 传出的结果。

webpack资源加载类似工作管道，可以使用多个loader，输出结果必须是标准的js代码

例子：

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

foo-loader 被传入原始资源，bar-loader 将接收 foo-loader 的产出，返回最终转化后的模块(js代码)和一个 source map（可选）

模拟loader实现

模拟一

loader 将会处理 .txt 文件，并且将任何实例中的 [name] 直接替换为 loader 选项中设置的 name。然后返回包含默认导出文本的 JavaScript 模块。

//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) }`;
};

使用：

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

模拟二

模拟简单的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;
}

使用

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

参考https://www.webpackjs.com/contribute/writing-a-loader/

本文链接https://blog.csdn.net/qq_39903567/article/details/115334778

转载：https://blog.csdn.net/qq_39903567/article/details/115334778