我们看一下 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
/include.add('src') 对应 include: ['src']
use('eslint') 对应 use: []
loader('eslint-loader') 对应 loader: 'eslint-loader'
测试地址：https://runkit.com/embed/5tizmdtfci3t
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
}
}
作者：dailyvuejs
链接：https://www.jianshu.com/p/b2ef2d385b1b
随时随地看视频
