vue-cli中的webpack的config配置詳細說明 打開我們的vue項目文件夾我們可以清楚的看到文件夾下的三個文件， “dev.env.js”，“index.js”，“prod.env.js”， 我們先打開prod.env.js的文件，看里面的內容：‘use strict’ module.exports = { NODE_ENV: ‘“production”’ } prod.env.js的內容非常簡單，僅僅是導出了一個對象， 里面寫明了執行環境是“production（生產環境）”；

接下來看與之對應的“dev.env.js”文件：

‘use strict’ //引入webpack-merge模塊 const merge = require(‘webpack-merge’) //引入剛才打開的prod.env.js const prodEnv = require(’./prod.env’)module.exports = merge(prodEnv, { NODE_ENV: ‘“development”’ })在“dev.env.js”中，先引入了webpack-merge這個模塊。 這個模塊的作用是來合并兩個配置文件對象并生成一個新的配置文件， 有點兒類似于es6的object.assign(); vue-cli中將一些通用的配置抽出來放在一個文件內， 在對不同的環境配置不同的代碼，最后使用webpack-merge來進行合并， 減少重復代碼，正如文檔中所說， “webpack遵循不重復原則(Don’t repeat yourself - DRY)，不會再不同的環境中配置相同的代碼”當然，關于webpack-merge的內容還遠不止這些，想了解更多關于這個模塊的朋友請訪問 https://www.npmjs.com/package/webpack-merge好，讓我們接著回到代碼中來，引入webpack-merge后這個文件又引入了prod.env.js，接著就將prod.env.js的配置和新的配置，即指明開發環境（development）進行了merge。（我有點兒不太理解為什么要這樣做，如果不merge直接寫module.exports={NODE_ENV:’"development’}也是可以的，難道是為了優雅降級？）還有一點需要注意是的，development和production一定要加雙引號，不然會報錯！！！```c開頭引入了node中的path模塊，然后我們先來看dev下的配置內容：assetsSubDirectory指的是**靜態資源文件夾，默認“static”**，assetsPublicPath指的是**發布路徑**，proxyTable是我們常用來**配置代理API的地方**，后面的host和port相信大家都知道，我就不細說了，autoOpenBrowser是否自動打開瀏覽器errorOverlay查詢錯誤notifyOnErrors通知錯誤 ， poll是跟devserver相關的一個配置，webpack為我們提供的devserver是可以監控文件改動的，但在有些情況下卻不能工作，我們可以設置一個輪詢（poll）來解決useEslint是否使用eslintshowEslintErrorsInOverlay是否展示eslint的錯誤提示devtool webpack提供的用來方便調試的配置，它有四種模式，可以查看webpack文檔了解更多cacheBusting 一個配合devtool的配置，當給文件名插入新的hash導致清楚緩存時是否生成souce maps，默認在開發環境下為truecssSourceMap 是否開啟cssSourceMap我們再來看build下的配置內容:index 編譯后index.html的路徑，path.resolve(__dirname, ‘…/dist’)中path.resolve(__dirname）指的是index.js所在的絕對路徑，再去找“…/dist”這個路徑（node相關的知識），assetsRoot打包后的文件根路徑， 至于assetsSubDirectory和assetsPublicPath跟dev中的一樣，productionSourceMap是否開啟source-map，devtool同dev，productionGzip是否壓縮，productionGzipExtensions gzip模式下需要壓縮的文件的擴展名，設置后會對相應擴展名的文件進行壓縮bundleAnalyzerReport 是否開啟打包后的分析報告

這個是配置

//config目錄下index.js配置文件 // see http://vuejs-templates.github.io/webpack for documentation. // path是node.js的路徑模塊，用來處理路徑統一的問題 var path = require('path')module.exports = {// 下面是build也就是生產編譯環境下的一些配置build: {// 導入prod.env.js配置文件，只要用來指定當前環境，詳細見(1)env: require('./prod.env'),// 下面是相對路徑的拼接，假如當前跟目錄是config，那么下面配置的index屬性的屬性值就是dist/index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// 下面定義的是靜態資源的根目錄 也就是dist目錄assetsRoot: path.resolve(__dirname, '../dist'),// 下面定義的是靜態資源根目錄的子目錄static，也就是dist目錄下面的staticassetsSubDirectory: 'static',// 下面定義的是靜態資源的公開路徑，也就是真正的引用路徑assetsPublicPath: '/',// 下面定義是否生成生產環境的sourcmap，sourcmap是用來debug編譯后文件的，通過映射到編譯前文件來實現productionSourceMap: true,// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-plugin// 下面是是否在生產環境中壓縮代碼，如果要壓縮必須安裝compression-webpack-pluginproductionGzip: false,// 下面定義要壓縮哪些類型的文件productionGzipExtensions: ['js', 'css'],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or off// 下面是用來開啟編譯完成后的報告，可以通過設置值為true和false來開啟或關閉// 下面的process.env.npm_config_report表示定義的一個npm_config_report環境變量，可以自行設置bundleAnalyzerReport: process.env.npm_config_report},dev: {// 引入當前目錄下的dev.env.js，用來指明開發環境，詳見(2)env: require('./dev.env'),// 下面是dev-server的端口號，可以自行更改port: 8080,// 下面表示是否自定代開瀏覽器autoOpenBrowser: true,assetsSubDirectory: 'static',assetsPublicPath: '/',// 下面是代理表，作用是用來，建一個虛擬api服務器用來代理本機的請求，只能用于開發模式// 詳見(3)proxyTable: {},// CSS Sourcemaps off by default because relative paths are "buggy"// with this option, according to the CSS-Loader README// (https://github.com/webpack/css-loader#sourcemaps)// In our experience, they generally work as expected,// just be aware of this issue when enabling this option.// 是否生成css，map文件，上面這段英文就是說使用這個cssmap可能存在問題，但是按照經驗，問題不大，可以使用// 給人覺得沒必要用這個，css出了問題，直接控制臺不就完事了cssSourceMap: false} } (1)下面是prod.env.js的配置內容module.exports = {// 作用很明顯，就是導出一個對象，NODE_ENV是一個環境變量，指定production環境NODE_ENV: '"production"'} (2)下面是dev.env.js的配置內容// 首先引入的是webpack的merge插件，該插件是用來合并對象，也就是配置文件用的，相同的選項會被覆蓋var merge = require('webpack-merge')// 導入prod.env.js配置文件var prodEnv = require('./prod.env')// 將兩個配置對象合并，最終結果是 NODE_ENV: '"development"'module.exports = merge(prodEnv, {NODE_ENV: '"development"'}) (3)下面是proxyTable的一般用法vue-cli使用這個功能是借助http-proxy-middleware插件，一般解決跨域請求apiproxyTable: {'/list': {target: 'http://api.xxxxxxxx.com', -> 目標url地址changeOrigin: true, -> 指示是否跨域pathRewrite: {'^/list': '/list' -> 可以使用 /list 等價于 api.xxxxxxxx.com/list}}}

總結

以上是生活随笔為你收集整理的vue-cli中的webpack的config配置详细说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。