webpack-loader机制以及模拟实现

た入场券 2022-11-15 03:43 91阅读 0赞

### 文章目录 ###

*  使用
 *  loader和plugin区别
 *  链式调用多个loader
 *  模拟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代码  
![在这里插入图片描述][20210330201508410.png]  
例子：

//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_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]

[20210330201508410.png]: /images/20221022/24cf209641c14805ba28818b1d44f0c5.png
[https_www.webpackjs.com_contribute_writing-a-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