说明
玩转 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，我们就可以知道顺序是从右往左。
