當(dāng)小白被webpack搞得一臉懵逼生無可戀的時候糊识，vue-cli給我們帶來了黎明的曙光彩倚。然而姥卢，入了這個坑就發(fā)現(xiàn)卷要，webpakc的基礎(chǔ)知識還是要掌握的，否則要增刪減改些代碼都心驚膽戰(zhàn)独榴，不知道改了又會出現(xiàn)一些什么不可預(yù)測的錯誤僧叉。所以，我決定認(rèn)真地剖析一下這個坑棺榔。
前端發(fā)展太快瓶堕，每個版本都有增刪減改的地方。曾經(jīng)太年輕症歇，想著版本號越高越好郎笆，結(jié)果慘遇無數(shù)bug。所以在此先留下此次項目的運行環(huán)境忘晤，如果以后有不一樣的地方宛蚓，請把鍋推給版本。
node:6.6.0 //目前來講设塔，6.X的版本是比較穩(wěn)定的
vue-cli:2.8.0
router：yes
ESlint：no
Karma+Mocha：no
項目根目錄
|-- build // 項目構(gòu)建webpack相關(guān)代碼
|-- config // 項目開發(fā)環(huán)境配置
|-- node-moudles //node依賴包（自動生成的）
|-- src // 源碼目錄
|-- router //路由文件
|-- static // 靜態(tài)文件苍息，比如一些圖片，json數(shù)據(jù)等（打包成生產(chǎn)環(huán)境時，會將這個文件直接打包進去）
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
|-- README.md // 項目說明
|-- favicon.ico // 頁面標(biāo)簽顯示的logo
|-- index.html // 入口頁面
|-- package.json // 項目基本信息
package.json
根目錄下最需要了解的文件大概就是package.json了竞思。package.json文件描述了一個NPM包的所有相關(guān)信息表谊，包括作者、簡介盖喷、包依賴爆办、構(gòu)建等信息。格式必須是嚴(yán)格的JSON格式课梳。
name
顧名思義就是一個項目的名稱距辆，會在創(chuàng)建vue-cli的時候自動產(chǎn)生成。格式不規(guī)范的時候暮刃，會智能提示你重新輸入跨算，比如首字母不能大寫。scripts
scripts可以把npm的一些命令封裝起來椭懊，以達(dá)到開發(fā)時的高效率诸蚕。當(dāng)你的控制命令行長的跟裹腳布似得，這種感受就會越發(fā)得強烈了氧猬。除了封裝命令背犯，還可以編寫表達(dá)式等，但是并不常用盅抚。
"scripts": {
"dev": "node build/dev-server.js", //運行開發(fā)環(huán)境
"build": "node build/build.js" //打包項目
}
當(dāng)你在控制臺上運行npm run dev時就是運行node build/dev-server.js
-
devDependencies漠魏、dependencies
這是兩種依賴，devDependencies是開發(fā)環(huán)境所需要的依賴妄均，而后者是正常工作時需要的依賴柱锹。
當(dāng)運行npm install時，所安裝的東西就是這里邊的依賴丰包。
index.html
這是整個項目的入口文件禁熏，但是一般只定義一個空的根節(jié)點，在main.js里面定義的實例將掛載在這個節(jié)點之下烫沙。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>node</title>
</head>
<body>
<div id="app"></div> <!-- 構(gòu)建的項目都會填充在這里 -->
</body>
</html>
雖然初衷是想把webpack相關(guān)的內(nèi)容寫一寫就好的匹层，但是想了想學(xué)習(xí)vue有一兩月之久都沒有好好整理一下思路，確是不該锌蓄，所以就想細(xì)細(xì)地把相關(guān)內(nèi)容寫出來升筏。
與webpack相關(guān)的配置會在下一小節(jié)po出來的。
