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