我们来看看webpack-chain做了什么。使用链接API生成和简化Webpack版本2-4配置的修改。如果你熟悉cli-plugin-babel和cli-plugin-eslint的源代码，你会经常看到它。如何使用它？1.加载它constConfig=require('webpack-chain');2.调用newconstconfig=newConfig();下面一一介绍和使用方法：第一种：entrysetconfig.entry('index11').add('src/index11.js').end().entry('index22')。add('src/index22.js').end()下面调用方法看看：config.toString()print:{entry:{index11:['src/index11.js'],index22:['src/index22.js']}}二：插件设置参考：cli-service/lib/config/app.js格式如下：config.plugin(name).use(WebpackPlugin,args)constHTMLPlugin=require('html-webpack-plugin')consthtmlOptions={templateParameters:(compilation,assets,pluginOptions)=>{},template:'/Users/***/public/index.html'}webpackConfig.plugin('html').use(HTMLPlugin,[htmlOptions])我们调用下面的方法看看：config.toString()printit:plugins:[/*config.plugin('html')*/newHtmlWebpackPlugin({templateParameters:function(){/*省略长函数*/},template:'/Users/***/public/index.html'})]三:这里设置模块的方式有很多种，使用rules对应rules:[]test(/.js$/)对应test:/\.js$/include.add('src')对应包括：['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()//甚至创建命名用途（加载器）.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()printit:{devServer:{hot:true}}
