前言：vue-cli為我們配置了一些常規的指令和屬性，但是現實開發中往往需要更多的配置才能滿足某些需求，比如生產環境與開發環境的區分等等…本節記錄一下在vue中webpack 的相關知識，
package.json
先看一下package中默認的腳本指令：
- serve
- build
- lint
分別指代了vue-cli-service的對應指令
這里是參考
但是以上只是默認配置的常規項，遠遠不足以滿足現實的開發需求，往往需要探究以下幾種方法：
webpack中development和production兩種模式的打包
這里主要是對npm run serve 和 npm run build 之間做出區分
serve往往是本地運行的開發模式(development)
build往往是需要打包部署到正式或者測驗環境上的(production)
一個簡單的需求：開發環境我們希望方便除錯，而上線正式我們希望代碼被壓縮，
這里用到webpack的一個屬性devtool：
devtool: "source-map", // enum
devtool: "inline-source-map", // 嵌入到源檔案中
devtool: "eval-source-map", // 將 SourceMap 嵌入到每個模塊中
devtool: "hidden-source-map", // SourceMap 不在源檔案中參考
devtool: "cheap-source-map", // 沒有模塊映射(module mappings)的 SourceMap 低級變體(cheap-variant)
devtool: "cheap-module-source-map", // 有模塊映射(module mappings)的 SourceMap 低級變體
devtool: "eval", // 沒有模塊映射，而是命名模塊，以犧牲細節達到最快，
// 通過在瀏覽器除錯工具(browser devtools)中添加元資訊(meta info)增強除錯
// 犧牲了構建速度的 `source-map' 是最詳細的，
這就需要有不同的webpack的組態檔：
解決思路1：不斷更改webpack.config.js的內容
mode: 'development',
devtool: source-map',
mode: 'production',
devtool: 'cheap-module-source-map',
解決思路2：區分webpack組態檔
例如：webpack.dev.js webpack.prod.js兩種 ：開發用前者，上線用后者
所以默認的package.json也需要對應指定組態檔
"scripts": {
"serve": "vue-cli-service serve --config webpack.dev.js",
"build": "vue-cli-service build --config webpack.prod.js",
"lint": "vue-cli-service lint",
},
對思路2的進一步優化 引入webpack-merge
區分了組態檔其實還有一個可以優化的地方，那就是把dev和prod的組態檔中相同的部分進行提取：
建立一個公共的組態檔webpack.base.js
webpack-merge可以幫助我們引入公共配置進入dev和prod
npm install webpack-merge -D//安裝
附主要核心代碼：
以dev.config.js舉例利用merge合并：
const webpack = require('webpack')
const baseWebpackConfig = require('./webpack.base.conf')//共有的配置
const merge = require('webpack-merge')
//merge 合并
const devWebpackConfig = merge(baseWebpackConfig, {})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/333818.html
標籤：其他
上一篇：Python爬蟲js進階基礎|常見的加密演算法|md5、對稱加密、非對稱加密、base64、https、ca證書