先直接来看代码:
module.exports = function(source){
return source.replace('Webpack', 'JavaScript');
}
这三行代码就实现了一个最简单的Loader,它的作用是将源码中出现的所有’Webpack’替换成’JavaScript’。
参数source
就是所处理的文件的代码,是一个字符串。
所导出的函数必须是使用function
关键字声明的,不可以使用箭头函数,因为Webpack会修改函数的this
,而箭头函数没有自己的this
,所以可能会出错。
写好的Loader就可以在配置文件中引入使用:
const path = require('path');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'