说明
玩转 webpack 学习笔记
一个最简单的 loader 代码结构
定义:loader 只是一个导出为函数的 JavaScript 模块。
module.exports = function(source) {
return source;
};
多 Loader 时的执行顺序
多个 Loader 串行执行顺序从后到前
module.exports = {
entry: './src/index.js', output: {
filename: 'bundle.js', path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
};
函数组合的两种情况
- Unix 中的 pipline(从左往右)
- Compose(webpack 采取的是这种:从右往左)
compose = (f, g) => (...args) => f(g(...args));
通过一个例子验证 loader 的执行顺序
a-loader.js
:
module.exports = function(source) {
console.log ('loader a is executed');
return source;
};
b-loader.js
:
module.exports = function(source) {
console.log ('loader b is executed');
return source;
};
实战 loader 的顺序
1、新建初始化项目
新建文件夹 loader-order,然后执行初始化命令
npm init -y
2、安装 webpack webpack-cli
npm i webpack webpack-cli -D
3、添加 webpack.config.js 配置文件
新建 webpack.config.js
添加下面配置:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.js$/,
use: [
path.resolve('./loaders/a-loader.js'),
path.resolve('./loaders/b-loader.js')
]
}
]
}
}
4、添加两个 loader 以及 index 文件
结构如下:loader 的代码在上面,这里就不粘贴了
5、添加脚本执行
"build": "webpack"
运行 npm run build
,我们就可以知道顺序是从右往左。