我们看一下 webpack-chain 到底做什么?
Use a chaining API to generate and simplify the modification of Webpack version 2-4 configurations.
熟悉 cli-plugin-babel、cli-plugin-eslint 源码的话，你会时常看到它。
如何使用呢？
1、加载它
const Config = require('webpack-chain');
2、调用 new
const config = new Config();
后面就是一个一个的方法介绍和使用了：
第一个：entry 设置
config
.entry('index11').add('src/index11.js').end().entry('index22').add('src/index22.js').end()我们调用如下方法看看：
config.toString()打印一下：
{entry: {index11: ['src/index11.js'],index22: ['src/index22.js']}
}第二个：plugin 设置
参考：cli-service/lib/config/app.js
格式如下：
config.plugin(name).use(WebpackPlugin, args)const HTMLPlugin = require('html-webpack-plugin')const htmlOptions = {templateParameters: (compilation, assets, pluginOptions) => {},template: '/Users/***/public/index.html'
}webpackConfig.plugin('html').use(HTMLPlugin, [htmlOptions])我们调用如下方法看看：
config.toString()打印一下：
plugins: [/* config.plugin('html') */new HtmlWebpackPlugin({templateParameters: function () { /* omitted long function */ },template: '/Users/***/public/index.html'})
]第三个：module 设置
这里方法比较多，用到了
- rule 对应 rules: []
- test(/.js$/) 对应 test: /\.js$/
- include.add('src') 对应 include: ['src']
- use('eslint') 对应 use: []
- loader('eslint-loader') 对应 loader: 'eslint-loader'
测试地址：https://runkit.com/embed/5tiz...
config.module.rule('lint').test(/\.js$/).pre().include.add('src').end()// Even create named uses (loaders).use('eslint').loader('eslint-loader').options({rules: {semi: 'off'}});我们调用如下方法看看：
config.toString()打印一下：
{module: {rules: [/* config.module.rule('lint') */{test: /\.js$/,enforce: 'pre',include: ['src'],use: [/* config.module.rule('lint').use('eslint') */{loader: 'eslint-loader',options: {rules: {semi: 'off'}}}]}]}
}第四个：devServer 设置
config.devServer.set('hot', true);
config.devServer.hot(true)我们调用如下方法看看：
config.toString()打印一下：
{devServer: {hot: true}
}
