Webpack-chain 从入门到深入

一、前言

Webpack 的核心配置基于复杂且难以管理的 JavaScript 对象。在团队中有多个项目时，需要考虑构建配置的可扩展性，特别是当子项目具有特定特征需要个性化配置时，这变得复杂。Webpack-Chain 提供了可链式或顺流式的 API，通过用户指定的名称引用 Key 部分，有助于实现跨项目修改配置方式的标准化。Vue-CLI3 及一些开源构建器中采用了此方式，本文将引导您从入门到熟练，帮助您掌握 Webpack-Chain 的编写和使用。

二、语法介绍

1、Webpack 实例创建

使用 npm 或 yarn 安装 webpack-chain，安装命令如下：

npm i --save-dev webpack-chain

yarn add --dev webpack-chain

创建 webpack 实例：

const Config = require('webpack-chain');

const config = new Config();

后续配置步骤省略。

2、ChainedMap 和 ChainedSet

ChainedMap 和 ChainedSet 是 Webpack-Chain 的核心 API 接口，提供方便的链式和配置生成功能。

ChainedMap API 方法包括：

• clear(): 移除所有配置。


• delete(key): 移除单个配置。


• get(key): 获取指定键的值。


• getOrCompute(key, fn): 获取值，若不存在则计算并设置。


• set(key, value): 设置指定键的值。


• has(key): 检查键是否存在。


• values(): 返回所有值的数组。


• entries(): 返回配置的键值对对象。


• merge(obj, omit): 合并对象。


• batch(handler): 批量执行函数。


• when(condition, whenTruthy, whenFalsy): 条件执行函数。

ChainedSet API 方法包括：

• add(value): 添加值到末尾。


• prepend(value): 添加值到开头。


• clear(): 移除所有值。


• delete(value): 移除特定值。


• has(value): 检查值是否存在。


• values(): 返回值数组。


• merge(arr): 合并数组。


• batch(handler): 批量执行函数。


• when(condition, whenTruthy, whenFalsy): 条件执行函数。

3、方法简写

Webpack-Chain 提供了许多简写方法，如 devServer.hot，简化配置过程，例如：

devServer.hot(true);

等同于：

devServer.set('hot', true);

这些简写方法同样支持链式调用。

4、合并配置

合并配置时需注意，这不是 webpack 配置对象，合并前需转换：

config.merge({ devtool: 'source-map' });

获取 devtool 的值：

config.get('devtool');

三、常用实例编写

1、entry 入口配置

配置编译入口文件：

config.entry('main').add('./src/main.js');

等同于 webpack 配置：

entry: {main: ['./src/main.js']}

2、output 出口配置

配置出口文件：

config.output.path(path.resolve(__dirname, './dist')).filename('[name].[chunkhash].js').chunkFilename('chunks/[name].[chunkhash].js').libraryTarget('umd');

等同于 webpack 配置：

output: {path: path.resolve(__dirname, './dist'), filename: '[name].[chunkhash].js', chunkFilename: 'chunks/[name].[chunkhash].js', libraryTarget: 'umd'}

3、alias 别名配置

配置目录别名：

config.resolve.alias.set('@', path.resolve(__dirname, 'src')).set('assets', path.resolve(__dirname, 'src/assets'));

等同于 webpack 配置：

resolve: {alias: {'@': path.resolve(__dirname, 'src'), 'assets': path.resolve(__dirname, 'src/assets')}}

4、loader 配置新增

配置新的 loader：

config.module.rule('babel').test(/\.(js|jsx|mjs|ts|tsx)$/).include.add(path.resolve(__dirname, 'src')).end().use('babel-loader').loader('babel-loader').options({presets: ['@babel/preset-env']});

等同于 webpack 配置：

module: {rules: [{test: /\.(js|jsx|mjs|ts|tsx)$/, include: [path.resolve(__dirname, 'src')], use: [{loader: 'babel-loader', options: {presets: ['@babel/preset-env']}}]}]}

5、loader 配置修改

使用 tap 方法修改 loader 配置：

config.module.rule('babel').use('babel-loader').tap(options => {options.include = path.resolve(__dirname, 'test')})

6、loader 配置移除

移除 loader 配置：

config.module.rules.clear();

config.module.rule('babel').uses.clear();

7、plugin 配置新增

配置新的 plugin：

config.plugin('HtmlWebpackPlugin').use(HtmlWebpackPlugin, [{template: path.resolve(__dirname, './src/index.html'), minify: {...}}]);

等同于 webpack 配置：

plugins: [new HtmlWebpackPlugin({...})]

8、plugin 配置修改

使用 tap 方法修改 plugin 配置：

config.plugin('HtmlWebpackPlugin').tap((args) => [{...(args[0] || {}), template: path.resolve(__dirname, './main.html')}])

9、使用 when 条件进行配置

示例：仅在生产期间添加 minify 插件：

config.when(process.env.NODE_ENV === 'production', config => {config.plugin('minify').use(BabiliWebpackPlugin);})

10、插件移除配置

四、总结

本文介绍了 Webpack-Chain 的语法、常见配置和操作，帮助您从入门到熟练掌握编写和使用 Webpack-Chain。希望本文对您有所帮助。