我们在写webpack配置文件的时候,应该有注意到经常用到loader这个配置项,那么loader是用来做什么的呢?
loader其实是用来将源文件经过转化处理之后再输出新文件。
如果是数组形式的话,它的执行顺序是相反的,最后一个loader最早被调用,下一个loader传入的是上一个loader的返回结果。
基础的loader文件
首先在webpack.config.js
里调用新建的loader文件
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: path.resolve('./loader/index.js'),
options: {}
}
}
]
}
}
代码在传入loader文件的时候已经被转为string了,loader文件最终也必须返回string数据。loader文件里代码如下:
module.exports = function (content) {
console.log('loader文件', content);
return content;
}
获取options配置数据
webpack.config.js
文件里,在配置loader的同时,还可以配置options。
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: path.resolve('./loader/index.js'),
options: {
data: ’自定义的配置'
}
}
}
]
}
}
在loader文件里面可以利用webpack提供的loader-utils
来获取options。
const loaderUtils = require('loader-utils');
module.exports = function (content) {
// this是loader函数的执行上下文
const options = loaderUtils.getOptions(this);
console.log('配置文件', options); // {data:'自定义的配置'}
return content;
}
异步loader
之前举的例子都是在同步的情况下,那么在异步的情况中,必须调用this.async()
来告知loader等待异步结果,它会返回this.callback()
回调函数,这时候loader必须返回undefined
module.exports = function(content) {
const callback = this.async();
someAsyncOperation(content, function(err, result) {
if (err) return callback(err);
callback(null, result, map, meta);
});
};
总结
开头就提到过了,loader实质上是用来处理源文件的,在loader函数里面一般都会对代码进行转化处理,这里就会用到AST,将代码转换为AST方便对代码进行处理。