每次我們拿到vue的專案，第一步都是先npm install載入其依賴，其然後是npm run dev執行這個專案，我很好奇其內部的怎樣執行的，就把這大概的流程走一走，以供參考。
我們先來看一下package.json的目錄
每次當我們npm run dev的時候，其首先執行的是build/webpack.dev.conf.js的檔案，我們進到這檔案裡面接著看：
'use strict'
const utils =
require
('./utils'
)//引入utils檔案
const webpack =
require
('webpack'
)//引入webpack內建外掛程式
const config =
require
('../config'
)//引入config檔案
const merge =
require
('webpack-merge'
)//引入webpack-merge合併webpack配置物件
const path =
require
('path'
)//引入路徑解析外掛程式
const basewebpackconfig =
require
('./webpack.base.conf'
)//引入基本配置檔案
const copywebpackplugin =
require
('copy-webpack-plugin'
)//引入拷貝檔案外掛程式
//引入自動生成html模板外掛程式
const htmlwebpackplugin =
require
('html-webpack-plugin'
)//引入自動識別webpack錯誤型別外掛程式
const friendlyerrorsplugin =
require
('friendly-errors-webpack-plugin'
)//檢視埠工具
const portfinder =
require
('portfinder'
)//獲取到全域性環境變數
const
host
= process.env.
host
const
port
= process.env.
port
&&number
(process.env.
port
)//合併配置物件
//合併當前模組和basewebpackconfig模組
const devwebpackconfig =
merge
(basewebpackconfig,)}
,//配置開發對映
//開發環境建議使用對映cheap-module-eval-source-map
//生產環境建議使用對映cheap-module-source-map
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devserver options should be customized in /config/index.js
//根據生產和開發環境定製devserver的配置
devserver:,]
,}, hot:
true
,//是否熱更新
contentbase:
false
,// since we use copywebpackplugin.
compress:
true
,//壓縮檔案
host:
host
|| config.dev.host,
//啟動服務ip位址
port:
port
|| config.dev.port,
//啟動埠號
open: config.dev.autoopenbrowser,
overlay: config.dev.erroroverlay
?:false
, publicpath: config.dev.assetspublicpath,
proxy: config.dev.proxytable,
//**服務
quiet:
true
,// necessary for friendlyerrorsplugin
watchoptions:},
plugins:
[//引用到的外掛程式
newwebpack.defineplugin()
,new
webpack.hotmodulereplacementplugin()
,//實現模組熱替換
//直接返回更新模組熱替換的檔名
newwebpack.namedmodulesplugin()
,// hmr shows correct file names in console on update.
newwebpack.noemitonerrorsplugin()
,//
newhtmlwebpackplugin()
,// copy custom static assets複製靜態資源
newcopywebpackplugin([
])]}
)//暴露乙個promise
module.exports =
newpromise
((resolve, reject)
=>
else:$
`],}
, onerrors: config.dev.notifyonerrors
? utils.
createnotifiercallback()
: undefined
}))resolve
(devwebpackconfig)
//返回該例項}})})
其中util用來用來配置解析css 、scss等樣式的外掛程式。
而conf資料夾下則使用來配置根據不同生產環境配置不同對映，埠，打包出口檔案路徑等內容。
webpack.base.conf算是webpack的主要配置檔案之一，用來配置出入口檔案，loader，路徑解析的作用。
vue cli的webpack模版專案配置解析
var chalk require chalk 定製終端字串的顏色輸出樣式 var semver require semver 語義化版本控制規範 var packageconfig require package.json var shell require shelljs 呼叫系統命令 呼叫子執...
Vue CLI 基於webpack構建優化
參考vue cli 基於webpack構建優化，資源打包與資源預壓縮 yarn add filemanager webpack plugin dev d 宣告外掛程式 const filemanagerplugin require filemanager webpack plugin 外掛程式配置。...
vue cli和webpack多頁面配置
注 這裡使用的是vue腳手架一鍵部署 1 build檔案目錄下的webpack.base.conf.js檔案 main.js的路徑 entry 2 build檔案目錄下的webpack.dev.conf.js檔案 index.html new htmlwebpackplugin newhtmlweb...