npm run build:具體

npm run 流程圖

配置文件的流程圖

主要配置文件概述

"sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
"uat": "cross-env NODE_ENV=production env_config=uat node build/build.js",
"prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
複製代碼

cross-env NODE_ENV=production env_config=sit cross-env 是設置環境變量的命令 NODE_ENV=production 是指生產環境 env_config是指具體的那個生產環境

build.js

loading效果 webpack編譯 輸出信息

check-versions.js

檢測node版本 檢測npm版本

dev-client.js

引入eventsource-polyfill模塊 監聽dev-server.js中webpack-hot-middleware發佈的事件並做相應的處理

dev-server.js

檢查npm與node的版本 引入相關插件和配置 建立express服務器和webpack編譯器 配置開發中間件（webpack-dev-middleware）和熱重載中間件（webpack-hot-middleware） 掛載代理服務和中間件 配置靜態資源 啓動服務器監聽特定端口（8080） 自動打開瀏覽器並打開特定網址（localhost:8080）

utils.js

設置靜態文件的公共路徑，用於修改src屬性的值 css加載器的相關配置 對.vue文件以外的css文件或css預處理器文件進行處理

vue-loader-conf.js

根據當前的開發環境對webpack中的vue-loader進行配置

webpack.base.conf.js

path模塊不用說你們確定都知道，是理一些路徑的，不管是在這個配置裏還其它配置中，這個是必不可少的
util是對vue-loader對於css預編譯一些提取的工具模塊，由於對於我的開發而言，在裏面提供了，sass,less,stylus,possCss等一系列預編譯解析的loader config是對開發環境和生產環境的一系列不一樣參數的，路徑等配置
vueLoaderConfig也是一樣基礎生產環境和開發環境對vue-loader進行的配置 配置webpack編譯入口 配置webpack輸出路徑、名稱和靜態文件路徑 配置不一樣模塊的處理規則與命名規則

webpack.dev.conf.js

將hot-reload相關的代碼添加到entry chunks 合併基礎的webpack配置 使用styleLoaders 配置Source Maps 配置webpack插件

webpack.prod.conf.js

合併基礎的webpack配置 使用styleLoaders 配置webpack的輸出 配置webpack插件 gzip模式下的webpack插件配置 webpack-bundle分析

部分參考連接

• vue-cli中webpack配置之build.js
• vue-cli中webpack配置讀之check-versions.js
• vue-cli中webpack配置之dev-client.js
• vue-cli中webpack配置之dev-server.js
• vue-cli中webpack配置之utils.js
• vue-cli中webpack配置之vue-loader-conf.js
• vue-cli中webpack配置之webpack.base.conf.js
• vue-cli中webpack配置之webpack.dev.conf.js
• vue-cli中webpack配置之webpack.prod.conf.js