前言
在項目開發中我們難免碰到需要對webpack配置更改的情況，今天就主要來講一下在vue.config.js中對一些配置的更改，簡單介紹一下loader的使用；用configureWebpack簡單的配置；用chainWebpack做高級配置；包括對loader的添加，修改；以及插件的配置
1、首先簡單介紹一下webpack中loader的簡單使用：
loader：是webpack用來預處理模塊的，在一個模塊被引入之前，會預先使用loader處理模塊的內容，在你打包的時候對某些內容需要loader來處理一下，比如css模塊；默認webpack只會處理js代碼，所以當我們想要去打包其他內容時，就需要相應的loader去處理某些內容
使用方法：
在配置文件中webpack.config.js加入module屬性，該屬性是一個對象,在這個屬性中有一個rules字段，先上代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
module:{
rules:[{
test:/\.js$/,
use:[{
loader:
'babel-loader'
,
options: {
presets: [
"es2015"
,
"react"
],
plugins: [
"syntax-dynamic-import"
]
}
}]
}]
}
|
rules是一個數組，你所有的loader配置都可以寫在這個數組里，每個loader配置是一個對象，匹配不同的規則；
test:test后是一個正則表達式，匹配不同的文件類型;
use:在這個規則中，當你匹配了這個文件后，需要使用相應的loader去處理這類型的文件，use接收的是一個數組，意味着當他匹配到文件后，它可以啟用很多的loader去處理文件的內容；
如果使用的是loader的默認配置，可以寫use:['css-loader','style-loader']；
如果是需要用到額外配置則需要寫成對象，講配置寫在options里；
當然，還會有其他的一些屬性比如（exclude、include等），這里就不再詳細贅述
在你使用這些loader之前需要用npm去安裝這些包；
2、用configureWebpack簡單的配置；
|
1
2
3
4
5
6
7
8
|
/ vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new
MyAwesomeWebpackPlugin()
]
}
}
|
該對象將會被 webpack-merge 合並入最終的 webpack 配置。
如果你需要基於環境有條件地配置行為，或者想要直接修改配置，那就換成一個函數 (該函數會在環境變量被設置之后懶執行)。該方法的第一個參數會收到已經解析好的配置。在函數內，你可以直接修改配置，或者返回一個將會被合並的對象：
|
1
2
3
4
5
6
7
8
9
10
|
// vue.config.js
module.exports = {
configureWebpack: config => {
if
(process.env.NODE_ENV ===
'production'
) {
// 為生產環境修改配置...
}
else
{
// 為開發環境修改配置...
}
}
}
|
3、用chainWebpack做高級配置
Vue CLI 內部的 webpack 配置是通過 webpack-chain 維護的。這個庫提供了一個 webpack 原始配置的上層抽象，使其可以定義具名的 loader 規則和具名插件，並有機會在后期進入這些規則並對它們的選項進行修改。
它允許我們更細粒度的控制其內部配置。接下來有一些常見的在 vue.config.js 中的 chainWebpack 修改的例子。
官方文檔給我提供了一些簡單的示例：
修改 Loader 選項
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule(
'vue'
)
.use(
'vue-loader'
)
.loader(
'vue-loader'
)
.tap(options => {
// 修改它的選項...
return
options
})
}
}
|
添加一個新的 Loader
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// vue.config.js
module.exports = {
chainWebpack: config => {
// GraphQL Loader
config.module
.rule(
'graphql'
)
.test(/\.graphql$/)
.use(
'graphql-tag/loader'
)
.loader(
'graphql-tag/loader'
)
.end()
}
}
|
替換一個規則里的 Loader，
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 添加svg-sprite-loader
const svgRule = config.module.rule(
'svg'
)
svgRule.uses.clear()
svgRule
.use(
'svg-sprite-loader'
)
.loader(
'svg-sprite-loader'
)
.tap(options => {
options = {
symbolId:
'icon-[name]'
}
return
options
})
|
修改插件的代碼可以看下面的例子；
先上代碼，今天主要講我們項目中配置，配置的api地址： https://cli.vuejs.org/zh/conf...
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
const path = require(
'path'
)
const webpack = require(
'webpack'
)
module.exports = {
// 修改output.path
outputDir:
'dist'
,
// 修改output.publishPath
publishPath:
'./'
,
chainWebpack: config => {
// 添加全局scss文件
const types = [
'vue-modules'
,
'vue'
,
'normal-modules'
,
'normal'
]
types.forEach(type => {
//匹配到所有需要導入的文件
config.module.rule(
'scss'
).oneOf(type).use(
'style-resource'
)
.loader(
'style-resources-loader'
)
.options({
patterns: [
path.resolve(__dirname,
'src/css/base.scss'
)
]
})
})
// 添加svg-sprite-loader
const svgRule = config.module.rule(
'svg'
)
svgRule.uses.clear()
svgRule
.use(
'svg-sprite-loader'
)
.loader(
'svg-sprite-loader'
)
.tap(options => {
options = {
symbolId:
'icon-[name]'
}
return
options
})
// 移除 prefetch 插件 //預加載
config.plugins.
delete
(
'prefetch'
)
// 引入
const chunkFolder = process.env.NODE_ENV !==
'production'
?
'debug'
:
'dist'
config.plugin(
'dll-reference-plugin'
)
.use(webpack.DllReferencePlugin)
.tap(options => {
options[0] = {
context: __dirname,
manifest: require(path.join(__dirname, `./src/common_chunk/${chunkFolder}/manifest.json`))
}
return
options
})
config.plugin(
'add-asset-html-webpack-plugin'
)
.use(
'add-asset-html-webpack-plugin'
)
.tap(options => {
options[0] = {
filepath: path.resolve(__dirname, `./src/common_chunk/${chunkFolder}/lib_*.js`)
}
return
options
})
}
}
|
上述代碼里使用了style-resources-loader，可以自動化導入文件；
DllReferencePlugin這個插件是為了使第三方以來和我們自己編寫的代碼分開打包，提升打包速度；需要和add-asset-html-webpack-plugin這個插件一起使用；
使用這個插件打包后，在src/common_chunk這個文件夾下生成工具庫，將第三方依賴打包到一個文件里，並生成一個所有庫代碼的一個索引manifest.json文件
ps:全局引入公共樣式文件的另一種方法，這樣也可以直接在使用公共樣式了；
|
1
2
3
4
5
6
7
8
9
10
11
|
module.exports = {
// ...
css: {
loaderOptions: {
sass: {
// 根據自己樣式文件的位置調整
data: `@import
"@src/css/base.scss"
;`
}
}
}
};
|
總結
以上所述是小編給大家介紹的vue-cli中chainWebpack的使用方法 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！