configureWebpack 和chainWebpack的作用相同调衰，唯一的區(qū)別就是它們修改webpack配置的方式不同：
configureWebpack通過操作對象的形式，來修改默認(rèn)的webpack配置昧辽，該對象將會被 webpack-merge 合并入最終的 webpack 配置chainWebpack通過鏈?zhǔn)骄幊痰男问焦谕酰瑏硇薷哪J(rèn)的webpack配置
1.configureWebpack
- 如果這個值是一個對象向挖，則會通過 webpack-merge 合并到最終的配置中。
- 如果這個值是一個函數(shù)哪替，則會接收被解析的配置作為參數(shù)栋荸。該函數(shù)既可以修改配置并不返回任何東西，也可以返回一個被克隆或合并過的配置版本。
- 如果你需要基于環(huán)境有條件地配置行為蒸其，或者想要直接修改配置敏释，那就換成一個函數(shù) (該函數(shù)會在環(huán)境變量被設(shè)置之后懶執(zhí)行)。該方法的第一個參數(shù)會收到已經(jīng)解析好的配置摸袁。在函數(shù)內(nèi)钥顽，你可以直接修改配置，或者返回一個將會被合并的對象,
- configureWebpack不支持vue cli的語法糖或者說是不支持鏈?zhǔn)骄幊膛渲眯问娇恐Ｖ荒芡ㄟ^操作對象的形式蜂大，來修改默認(rèn)的webpack配置
下面來看一下configureWebpack配置方式：
1.1 configureWebpack對象形式
configureWebpack:{
resolve: {
// 別名配置
alias: {
'assets': '@/assets',
'common': '@/common',
'components': '@/components',
'network': '@/network',
'configs': '@/configs',
'views': '@/views',
'plugins': '@/plugins',
}
}
},
1.2 configureWebpack函數(shù)形式
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
devServer: {
...
},
lintOnSave: false, // eslint-loader 是否在保存的時候檢查
productionSourceMap: false, // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
filenameHashing: true, //文件hash
configureWebpack: config => {
if (isProduction) {
...
} else {
...
}
//直接修改配置
config.resolve.alias['@asset'] = resolve('src/assets')
}
}
或者
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
devServer: {
...
},
lintOnSave: false, // eslint-loader 是否在保存的時候檢查
productionSourceMap: false, // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
filenameHashing: true, //文件hash
configureWebpack: config => {
if (isProduction) {
...
} else {
...
}
//返回一個將要合并的對象
return {
resolve: {
alias: {
'@asset':resolve('src/assets')
}
}
}
}
}
最好不要使用下面的方式，因?yàn)?code>Object.assign方法在合并對象時蝶怔，如果目標(biāo)對象（config）上有相同的屬性（resolve）奶浦，將會被覆蓋掉。不過這樣寫 Object.assign(config.resolve,{alias:{}}) 還是可以的踢星，只是覆蓋掉了alias澳叉。
Object.assign(config, {
resolve: {
alias: {
'@': resolve('./src'),
'@assets': resolve('./src/assets')
}
}
})
合并后，變成：
alias: {
'@': resolve('./src'),
'@assets': resolve('./src/assets')
}
2. chainWebpack
Vue CLI 內(nèi)部的 webpack 配置是通過 webpack-chain 維護(hù)的沐悦。這個庫提供了一個 webpack 原始配置的上層抽象成洗，使其可以定義具名的 loader 規(guī)則和具名插件，并有機(jī)會在后期進(jìn)入這些規(guī)則并對它們的選項(xiàng)進(jìn)行修改藏否。
官方代碼示例：
config
.plugin(name)
.use(WebpackPlugin, args)
參數(shù)說明：
name是webpack-chain里的key瓶殃，就是要加入的插件在webpack-chain配置里的 key ，就是我們自定義插件的名字,一般我們都保持跟插件名稱相同WebpackPlugin使用的 webpack 插件名副签，在這里遥椿，可以直接使用插件，無需進(jìn)行實(shí)例化淆储，就是不需要new WebpackPlugin()- args 插件的參數(shù)信息冠场。特別注意，args是一個數(shù)組遏考，例如 [{},{}] 這種方式慈鸠，可以配置多個插件實(shí)例
具體例子：
module.exports = (config) => {
// set svg-sprite-loader
config.module
.rule('svg')
.uses.clear() // 先刪除原有的默認(rèn)svg rule蓝谨，寫法1,
// .exclude.add(resolve('src/assets/icons')) // 寫法2 針對svg默認(rèn)規(guī)則灌具，忽略src/assets/icons此文件夾下的
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('./../src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
.end()
//開啟happyPack多線程打包
config.plugin('HappyPack').use(HappyPack, [
{
loaders: [
{
loader: 'babel-loader?cacheDirectory=true',
},
],
},
])
}
使用示例：
使用 HappyPack 開啟多線程打包：這里可以寫在 configureWebpack 也可以寫在 chainWebpack 里面
1.configureWebpack
module.exports = {
configureWebpack: config=>{
config.plugin=[
new HappyPack({
loaders:[
{
loader: 'babel-loader?cacheDirectory=true',
}
]
})
]
}
}
2.chainWebpack
//開啟happyPack多線程打包
config.plugin('HappyPack').use(HappyPack, [
{
loaders: [
{
loader: 'babel-loader?cacheDirectory=true',
},
],
},
])
可以看到使用chainWebpack鏈?zhǔn)綄懛〞啙嵑芏啵恍枰猲ew譬巫，相當(dāng)于是一個語法糖吧咖楣。
一些常用的webpack-chain 縮寫方法
ChainedMap的有些key，可以直接作為方法調(diào)用芦昔，這些縮寫方法也同樣會返回原始實(shí)例诱贿，方便后續(xù)的鏈?zhǔn)秸{(diào)用。
devServer.hot(true);
devServer.set('hot', true);
-
.end()通過.end()可以返回到更高層級的上下文，但是僅向上一個層級珠十，并且返回一個mutate后的實(shí)例料扰。或者是直接通過config是獲取的頂級上下文焙蹭。 -
.entry()是webpack中config.entryPoints.get()的縮寫 晒杈。可以通過config.entry(name).add(value)的.entry()縮寫方法配置孔厉，也可以通過config.entryPoints.get(name).add(value)配置拯钻。 -
.add()這是一個ChainedSet方法，它可以將值添加在Set的尾部撰豺。 -
output這是一個ChainedMap對象粪般，有很多方法，例如path()污桦，filename()亩歹，publicPath()等常用的方法。 -
module也是一個ChinedMap凡橱，主要方法為rules(),配置loader的規(guī)則捆憎，config.module.rule(name).use(name).loader(loader).options(options)，或者config.module.rule(name).use(name).tap(options => newOptions) -
plugin也是ChinedMap梭纹，主要是對plugin配置躲惰，config.plugin(name).use(WebpackPlugin, args)。重點(diǎn)對plugin做深入學(xué)習(xí)变抽。
引入webpack-chain后如何配置plugin?
- 新增插件 adding
- 修改參數(shù) modify arguments
- 修改實(shí)例 modify instantiation
- 移除插件 removing
- 某個插件前調(diào)用插件odering before
- 某個插件后調(diào)用插件ordering after
1.新增插件
config
.plugin(name)
.use(WebpackPlugin, args)
// 直接引入
config
.plugin('hot')
.use(webpack.HotModuleReplacementPlugin);
// 可以通過requrire('')的方式引入插件础拨。
config
.plugin('env')
.use(require.resolve('webpack/lib/EnvironmentPlugin'), [{ 'VAR': false }]);
2.修改參數(shù)
config
.plugin(name)
.tap(args => newArgs)
// 為arguments新增一個'SECRET_KEY'
config
.plugin('env')
.tap(args => [...args, 'SECRET_KEY'])
修改實(shí)例
config
.plugin(name)
.init((Plugin, args) => new Plugin(...args));
2.刪除插件
config.plugins.delete(name)
3.某個插件前調(diào)用插件odering before (不能在同一個插件上既使用before又使用after)
config
.plugin(name)
.before(otherName)
// 例子
config
.plugin('html-template')
.use(HtmlWebpackTemplate)
.end()
.plugin('script-ext')
.use(ScriptExtWebpackPlugin)
before('html-template')
4.某個插件后調(diào)用插件ordering after(不能在同一個插件上既使用before又使用after)
config
.plugin(name)
.after(otherName)
// 例子
config
.plugin('html-template')
.use(HtmlWebpackTemplate)
.after('script-ext')
.end()
.plugin('script-ext')
.use(ScriptExtWebpackPlugin)
轉(zhuǎn)自：http://www.reibang.com/p/27d82d98a041
