webpack原理篇（五十九）：loader 的链式调用与执行顺序

说明

玩转 webpack 学习笔记

一个最简单的 loader 代码结构

定义：loader 只是一个导出为函数的 JavaScript 模块。

module.exports = function(source) {
	return source;
};
1
2
3

多 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'
                ]
            }
        ]
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

函数组合的两种情况

• Unix 中的 pipline（从左往右）
• Compose（webpack 采取的是这种：从右往左）

compose = (f, g) => (...args) => f(g(...args));
1

通过一个例子验证 loader 的执行顺序

a-loader.js:

module.exports = function(source) {
	console.log ('loader a is executed');
	return source;
};
1
2
3
4

b-loader.js:

module.exports = function(source) {
	console.log ('loader b is executed');
	return source;
};
1
2
3
4

实战 loader 的顺序

1、新建初始化项目

新建文件夹 loader-order，然后执行初始化命令

npm init -y
1

2、安装 webpack webpack-cli

npm i webpack webpack-cli -D
1

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')
                ]
            }
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4、添加两个 loader 以及 index 文件

结构如下：loader 的代码在上面，这里就不粘贴了

5、添加脚本执行

"build": "webpack"
1

运行 npm run build，我们就可以知道顺序是从右往左。