configureWebpack 和chainWebpack的作用相同，唯一的區(qū)別就是它們修改webpack配置的方式不同：
configureWebpack通過(guò)操作對(duì)象的形式，來(lái)修改默認(rèn)的webpack配置，該對(duì)象將會(huì)被 webpack-merge 合并入最終的 webpack 配置chainWebpack通過(guò)鏈?zhǔn)骄幊痰男问矫觯瑏?lái)修改默認(rèn)的webpack配置
1.configureWebpack
- 如果這個(gè)值是一個(gè)對(duì)象吧史，則會(huì)通過(guò) webpack-merge 合并到最終的配置中眠屎。
- 如果這個(gè)值是一個(gè)函數(shù)，則會(huì)接收被解析的配置作為參數(shù)词爬。該函數(shù)既可以修改配置并不返回任何東西，也可以返回一個(gè)被克隆或合并過(guò)的配置版本权均。
- 如果你需要基于環(huán)境有條件地配置行為顿膨，或者想要直接修改配置，那就換成一個(gè)函數(shù) (該函數(shù)會(huì)在環(huán)境變量被設(shè)置之后懶執(zhí)行)叽赊。該方法的第一個(gè)參數(shù)會(huì)收到已經(jīng)解析好的配置恋沃。在函數(shù)內(nèi)，你可以直接修改配置蛇尚，或者返回一個(gè)將會(huì)被合并的對(duì)象,
- configureWebpack不支持vue cli的語(yǔ)法糖或者說(shuō)是不支持鏈?zhǔn)骄幊膛渲眯问窖看健Ｖ荒芡ㄟ^(guò)操作對(duì)象的形式，來(lái)修改默認(rèn)的webpack配置
下面來(lái)看一下configureWebpack配置方式：
1.1 configureWebpack對(duì)象形式
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 是否在保存的時(shí)候檢查
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 是否在保存的時(shí)候檢查
productionSourceMap: false, // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
filenameHashing: true, //文件hash
configureWebpack: config => {
if (isProduction) {
...
} else {
...
}
//返回一個(gè)將要合并的對(duì)象
return {
resolve: {
alias: {
'@asset':resolve('src/assets')
}
}
}
}
}
最好不要使用下面的方式取劫，因?yàn)?code>Object.assign方法在合并對(duì)象時(shí)匆笤，如果目標(biāo)對(duì)象（config）上有相同的屬性（resolve），將會(huì)被覆蓋掉谱邪。不過(guò)這樣寫 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 配置是通過(guò) webpack-chain 維護(hù)的咆课。這個(gè)庫(kù)提供了一個(gè) webpack 原始配置的上層抽象，使其可以定義具名的 loader 規(guī)則和具名插件扯俱，并有機(jī)會(huì)在后期進(jìn)入這些規(guī)則并對(duì)它們的選項(xiàng)進(jìn)行修改书蚪。
官方代碼示例：
config
.plugin(name)
.use(WebpackPlugin, args)
參數(shù)說(shuō)明：
name是webpack-chain里的key，就是要加入的插件在webpack-chain配置里的 key 迅栅，就是我們自定義插件的名字,一般我們都保持跟插件名稱相同WebpackPlugin使用的 webpack 插件名殊校，在這里，可以直接使用插件读存，無(wú)需進(jìn)行實(shí)例化为流，就是不需要new WebpackPlugin()- args 插件的參數(shù)信息。特別注意让簿，args是一個(gè)數(shù)組敬察，例如 [{},{}] 這種方式，可以配置多個(gè)插件實(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 針對(duì)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)綄懛〞?huì)簡(jiǎn)潔很多，不需要new，相當(dāng)于是一個(gè)語(yǔ)法糖吧虫给。
一些常用的webpack-chain 縮寫方法
ChainedMap的有些key藤抡，可以直接作為方法調(diào)用，這些縮寫方法也同樣會(huì)返回原始實(shí)例抹估，方便后續(xù)的鏈?zhǔn)秸{(diào)用缠黍。
devServer.hot(true);
devServer.set('hot', true);
-
.end()通過(guò).end()可以返回到更高層級(jí)的上下文，但是僅向上一個(gè)層級(jí)药蜻，并且返回一個(gè)mutate后的實(shí)例瓷式。或者是直接通過(guò)config是獲取的頂級(jí)上下文语泽。 -
.entry()是webpack中config.entryPoints.get()的縮寫 贸典。可以通過(guò)config.entry(name).add(value)的.entry()縮寫方法配置踱卵，也可以通過(guò)config.entryPoints.get(name).add(value)配置廊驼。 -
.add()這是一個(gè)ChainedSet方法，它可以將值添加在Set的尾部惋砂。 -
output這是一個(gè)ChainedMap對(duì)象妒挎，有很多方法，例如path()西饵，filename()酝掩，publicPath()等常用的方法。 -
module也是一個(gè)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驯嘱，主要是對(duì)plugin配置镶苞，config.plugin(name).use(WebpackPlugin, args)。重點(diǎn)對(duì)plugin做深入學(xué)習(xí)鞠评。
引入webpack-chain后如何配置plugin?
- 新增插件 adding
- 修改參數(shù) modify arguments
- 修改實(shí)例 modify instantiation
- 移除插件 removing
- 某個(gè)插件前調(diào)用插件odering before
- 某個(gè)插件后調(diào)用插件ordering after
1.新增插件
config
.plugin(name)
.use(WebpackPlugin, args)
// 直接引入
config
.plugin('hot')
.use(webpack.HotModuleReplacementPlugin);
// 可以通過(guò)requrire('')的方式引入插件茂蚓。
config
.plugin('env')
.use(require.resolve('webpack/lib/EnvironmentPlugin'), [{ 'VAR': false }]);
2.修改參數(shù)
config
.plugin(name)
.tap(args => newArgs)
// 為arguments新增一個(gè)'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.某個(gè)插件前調(diào)用插件odering before (不能在同一個(gè)插件上既使用before又使用after)
config
.plugin(name)
.before(otherName)
// 例子
config
.plugin('html-template')
.use(HtmlWebpackTemplate)
.end()
.plugin('script-ext')
.use(ScriptExtWebpackPlugin)
before('html-template')
4.某個(gè)插件后調(diào)用插件ordering after(不能在同一個(gè)插件上既使用before又使用after)
config
.plugin(name)
.after(otherName)
// 例子
config
.plugin('html-template')
.use(HtmlWebpackTemplate)
.after('script-ext')
.end()
.plugin('script-ext')
.use(ScriptExtWebpackPlugin)
