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代码
<