我们看一下 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
}
}