項目結構
.
|-- build // 項目構建(webpack)相關代碼
| |-- build.js // 生產環境構建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- dev-client.js // 熱重載相關
| |-- dev-server.js // 構建本地服務器
| |-- utils.js // 構建工具相關
| |-- webpack.base.conf.js // webpack基礎配置
| |-- webpack.dev.conf.js // webpack開發環境配置
| |-- webpack.prod.conf.js // webpack生產環境配置
|-- config // 項目開發環境配置
| |-- dev.env.js // 開發環境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產環境變量
| |-- test.env.js // 測試環境變量
|-- src // 源碼目錄
| |-- components // vue公共組件
| |-- store // vuex的狀態管理
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件，加載各種公共組件
|-- static // 靜態文件，比如一些圖片，json數據等
| |-- data // 羣聊分析得到的數據用於數據可視化
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
|-- README.md // 項目說明
|-- favicon.ico
|-- index.html // 入口頁面
|-- package.json // 項目基本信息package.json
package.json文件是項目根目錄下的一個文件，定義該項目開發所需要的各種模塊以及一些項目配置信息（如項目名稱、版本、描述、作者等）。
scripts字段
package.json文件裏有一個scripts字段。
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js"
}在開發環境下，在命令行中運行npm run dev就相當於在執行node build/dev-server.js。所以script字段是用來指定npm相關命令的縮寫的。
dependencies字段和devDependencies字段
dependencies字段指定了項目運行時所依賴的模塊，devDependencies字段指定了項目開發時所依賴的模塊。在命令行中運行npm install命令，會自動安裝dependencies和devDependencies字段中的模塊。
package.json還有很多配置相關項，想進一步瞭解package.json的可參考：https://docs.npmjs.com/files/package.json
webpack配置相關
上面說到在命令行中npm run dev就相當於在執行node build/dev-server.js，想必dev-server.js這個文件是十分重要的，它是在開發環境下構建時第一個要運行的文件。掘金上已經有一篇對vue-cli#2.0 webpack配置的分析文章，裏面詳細講解了webpack相關配置文件的每行代碼的意思，我只做一些補充。鏈接在此（一定要自習閱讀，收穫會很大）：https://gold.xitu.io/post/584e48b2ac502e006c74a120。
dev-server.js
…
…
// http-proxy可以實現轉發所有請求代理到後端真實API地址，以實現前後端開發完全分離
// 在config/index.js中可以對proxyTable想進行配置
var proxyMiddleware = require(‘http-proxy-middleware’)
...
...
// 熱加載要使用webpack-dev-middleware在沒有webpack-dev-server的時候進行熱加載
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// 當html-webpack-plugin模板改變是強制進行頁面重新加載
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})webpack.base.conf.js
...
...
module.export = {
// 編譯入口文件
entry: {},
// 編譯輸出路徑
output: {},
// 一些解決方案配置
resolve: {},
resolveLoader: {},
module: {
// 各種不同類型文件加載器配置
loaders: {
...
...
// js文件用babel轉碼
{
test: /\.js$/,
loader: 'babel',
include: projectRoot,
// 哪些文件不需要轉碼
exclude: /node_modules/
},
...
...
}
},
// vue文件一些相關配置
vue: {}
} check-version.js
這個文件主要是用來檢測當前環境中的node和npm版本和我們需要的是否一致的。
// 加載語義化版本測試庫
var semver = require('semver')
// 定製控制檯日誌的輸入樣式
var chalk = require('chalk')
// 引入package.json文件
var packageConfig = require('../package.json')
var exec = function (cmd) {
return require('child_process')
.execSync(cmd).toString().trim()
}
// 定義node和npm版本需求所組成的數組
var versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
},
{
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
}
]
module.exports = function () {
var warnings = []
// 依次判斷版本是否符合要求
for (var i = 0; i < versionRequirements.length; i++) {
var mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
...
}想把webpack完全搞懂還是需要費很大功夫的，我感覺自己也只是入了一個門而已，要想深入瞭解webpack還是要去官網看說明文檔。
http://webpack.github.io/docs/
https://webpack.js.org/configuration/
.babelrc
Babel解釋器的配置文件，存放在根目錄下。Babel是一個轉碼器，項目裏需要用它將ES6代碼轉爲ES5代碼。這裏有一篇阮一峯老師寫的相關文章供參考：Babel 入門教程
// 設定轉碼規則
"presets": ["es2015", "stage-2"],
// 轉碼的一些插件
"plugins": ["transform-runtime"],
"comments": false .editorconfig
該文件定義項目的編碼規範，編輯器的行爲會與.editorconfig 文件中定義的一致，並且其優先級比編輯器自身的設置要高，這在多人合作開發項目時十分有用而且必要。
root = true
[*] // 對所有文件應用下面的規則
charset = utf-8 // 編碼規則用utf-8
indent_style = space // 縮進用空格
indent_size = 2 // 縮進數量爲2個空格
end_of_line = lf // 換行符格式
insert_final_newline = true // 是否在文件的最後插入一個空行
trim_trailing_whitespace = true // 是否刪除行尾的空格瞭解更多請參考官方配置文檔http://editorconfig.org/
原文鏈接：
https://segmentfault.com/a/1190000007880723