因為 @vue/cli-service 對 webpack 配置進(jìn)行了抽象叛薯,所以理解配置中包含的東西會比較困難浑吟,尤其是當(dāng)你打算自行對其調(diào)整的時候。
vue-cli-service 暴露了 inspect 命令用于審查解析好的 webpack 配置耗溜。那個全局的 vue 可執(zhí)行程序同樣提供了 inspect 命令组力,這個命令只是簡單的把 vue-cli-service inspect 代理到了你的項目中。
該命令會將解析出來的 webpack 配置抖拴、包括鏈?zhǔn)皆L問規(guī)則和插件的提示打印到 stdout燎字。
1、導(dǎo)出全部配置
vue inspect > output.js // 默認(rèn)mode development
// 默認(rèn)情況下阿宅,inspect命令將顯示開發(fā)配置的輸出候衍。要查看生產(chǎn)配置,您需要運行
vue inspect --mode production > output.prod.js
2洒放、命令行輸出一個/多個rule
vue inspect module.rules
vue inspect module.rules.0
3蛉鹿、命令行輸出固定名稱(插件/規(guī)則)的配置
vue inspect --rule vue
vue inspect --plugin html
4、命令行輸出全部插件/規(guī)則的配置
vue inspect --rules
vue inspect --plugins
以上實現(xiàn)為VUE CLI4.x版本
5往湿、使用 vue-cli-service inspect 來查看一個 Vue CLI 3 項目的 webpack 配置信息(包括:development榨为、production)
- --mode 指定環(huán)境模式 (默認(rèn)值:development)
- 運行命令,在終端輸出:
開發(fā)環(huán)境:npx vue-cli-service inspect --mode development
生產(chǎn)環(huán)境:npx vue-cli-service inspect --mode production
- 運行命令,在終端輸出:
- 運行命令煌茴,將輸出導(dǎo)入到 js 文件:
開發(fā)環(huán)境:npx vue-cli-service inspect --mode development > webpack.config.development.js
生產(chǎn)環(huán)境:npx vue-cli-service inspect --mode production > webpack.config.production.js
- 運行命令煌茴,將輸出導(dǎo)入到 js 文件:
- 在產(chǎn)生的 js 文件開頭随闺,添加:
module.exports =
,然后格式化即可查看蔓腐。
- 在產(chǎn)生的 js 文件開頭随闺,添加: