最近在閱讀同事的vue工程配置祠墅，覺得自己對(duì)webpack配置的了解還是不夠詳細(xì)蔼囊，于是down了最新的vue-cli腳手架低葫，來逐行閱讀下其中相關(guān)的配置疏之，以便對(duì)工程整體有詳細(xì)的了解
先看下最新的vue-cli 腳手架下載的目錄
可以看到，分別具有
build config node_modules src static 一些配置文件
其中build和config文件夾下存放的就是我們webpack和配置相關(guān)的文件速挑，展開看下
先對(duì)各個(gè)文件有個(gè)大概的了解谤牡，然后我們依次來看：
一、package.json
我們知道啟動(dòng)一個(gè)項(xiàng)目首先先查看package.json的配置姥宝，package.json會(huì)對(duì)包的基本信息翅萤，運(yùn)行信息，依賴做展示和管理腊满，
先把依賴折疊套么，我們看下其他的信息:
從入口node命令我們看到，啟動(dòng)項(xiàng)目的命令問npm run dev碳蛋，而dev的配置為
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
意味著我們用dev-server這個(gè)開發(fā)插件運(yùn)行build目錄下的webpack.dev.conf.js胚泌，那我們進(jìn)入目錄下查看webpack.dev.conf.js具體有那些內(nèi)容
二、webpack.dev.conf.js
通過概覽整個(gè)文件我們得知：文件引入了一些配置和插件肃弟，然后配置了dev配置诸迟，并將dev配置導(dǎo)出。
其中愕乎，第19行阵苇，const devWebpackConfig = merge(baseWebpackConfig, {});調(diào)用merge方法對(duì)base配置和dev配置做了合并，
我們先進(jìn)入baseconfig頁面查看base做了哪些公用的配置
三感论、webpack.base.conf.js
base.conf.js引入了工具函數(shù)绅项，config文件配置，和對(duì)項(xiàng)目相關(guān)的入口比肄、輸出快耿、路徑、laoder做了基本的配置芳绩，
這些都是webpakc的基本配置選項(xiàng)掀亥，就不做贅述，不了解可以去官網(wǎng)看api妥色。
https://doc.webpack-china.org/configuration/
展開來看：
其中59行用到了utils的工具方法assetsPath搪花，我們先去查看下這個(gè)方法是干嘛用的：
可以看到assetsPath方法就是對(duì)靜態(tài)文件和地址進(jìn)行了拼接。
再看base.conf.js里還用到了很多config下的配置嘹害，我們進(jìn)入config文件撮竿，看他配好了哪些參數(shù)用來調(diào)用。
根據(jù)文件頭部的require笔呀，進(jìn)入config文件夾幢踏，打開index.js, 先折疊概覽，發(fā)現(xiàn)config文件夾內(nèi)對(duì)dev和build
分別做了兩份配置许师。
dev和build的想關(guān)配置我都做了注釋：
參考config配置房蝉，可以對(duì)base.conf有了基本的了解僚匆。通用的配置在base里都進(jìn)行了調(diào)用
四、再看webpack.dev.conf.js剩下配置
了解了base的配置我們回頭再來看dev.conf.js搭幻。我們展開devWebpackConfig方法白热，可以看到：
看出，devWebpackConfig配置了處理樣式的module粗卜，根據(jù)config的配置開啟了一些devServer,并且聲明了一些常用的插件屋确。
關(guān)于build.js，prod.conf.js還有版本控制的check-version我在下篇文章里再會(huì)繼續(xù)介紹~~
