前言：
用了幾次 vue-cli 做 vue 項目，感覺沒什么大問題，雖然也沒有用 vue-router 和 vuex 。但是心里一直有個梗，就是最初的目錄生成和配置文件，一直沒動過，也不知道具體原理。
雖然網上一搜，類似對於目錄結構的大概介紹也不少，如圖：
僅僅到這一步，估計很多人會心有不甘，而且對於傳說中的難以配置的 webpack ，在這里好像也沒有什么感覺。實際上，通過在 vue-cli 里寫代碼，還真是沒感覺 webpack 的存在感，，，
並且尤雨溪也在文章里說明：
所以我就從頭配置了下，在閱讀正文前，請確保你有一定的 npm，webpack，vue 基礎，下面開始：
目標：
通過 vue-cli 配置的項目，如果不加 vue-router 和 測試文件，如圖：
那么生成的項目目錄應該是這樣子的，順帶看下我的 vue-cli 和 webpack 版本：
因為版本的不同，安裝的時候，如果有錯或問題，控制台都會有提示，這個需要隨機應變。
開始：
1. 在父目錄下，新建個文件夾 build-vue-cli-from-zero，切換到 build-vue-cli-from-zero，
按照提示填寫：
主要是 description 建議填寫下，否則后面一直會提示，這樣項目的第一個文件 package.json 就出現了
2. 安裝相關依賴
webpack vue vue-loader 這個肯定是要的：
裝完后，就會發現 package.json 的內容就多了一些
這是 --save-dev 的作用，具體不多說了，目錄下還多了一個文件：package-lock.json 和文件夾：node_modules
但是安裝完，會發現控制台有警告，這個肯定是要看的，通常有版本更新或者插件停用了，都會有警告的：
其他的警告仔細看沒什么的，但是這兩個警告就要求我們還要裝依賴了，那么繼續裝：
到這里，控制台還有警告，但是仔細看都無關緊要了：
所以后面如果還有這些警告，都可以忽略了。
3. 建立 src 目錄
通常，我們的工作都是在 src 這個目錄里完成的，這里我們就仿照 vue-cli 的風格，創建相應的文件和文件夾，當然，這里不如直接復制過來好了
到這里，乍一看，好像該有的文件都有了，雖然 lint 和 babel 都沒裝，但是好像也不影響運行，至少能跑起來吧，試試
結果報錯:
因為我們到目前為止都沒有配置過 webpack ，並不是說裝了就可以了，重頭戲才剛剛開始
4. webpack 配置上 - package.json
在項目下新建 config 文件夾，在里面繼續新建 index.js，目前的項目結構如圖：
從事后的角度來說，這里的 index.js 放的就是 webpack 的配置，就像是以前很多人在主文件目錄下放的 webpack.config.js 一樣，那么配置文件有了，肯定需要有地方運行這個配置文件，你看前面的報錯：
現在再來告訴你配置在 package.json 里：
注意，只有 dev 是新加的，test 最初 npm init 的時候就自動生成了，那么這里就要解釋下
1）首先 cross-env webpack-dev-server 都是依賴，這個后面要安裝；安裝 cross-env 是為了跨平台設置環境變量
2）NODE_ENV=development 表示設置 NODE 的環境變量為開發環境，這個也好理解
3）--config config/index.js 表示配置文件在 config/index.js 目錄下，當然這里是相對路徑，config 必須要和 package.json 在同一個目錄，否則要根據情況修改
到這里，大家應該還想起來了還有個命令 npm run build ，那么以此類推，完整的 scripts 是這樣：
前后 build 和 dev 有兩點區別，應該有人注意到了，production 和 development 是區分生產和開發環境；
webpack 和 webpack-dev-server 區別，我覺得是，生產環境下只要打包就行了，而開發環境下需要在 localhost 下測試，所以出現了 dev-server，看名字也很好理解嘛
這個明白就可以了，那么裝依賴：
5. webpack 配置下 – index.js
上面只是好了一半，因為 config/index.js 沒有內容嘛，里面要怎么寫，看下面：
//依賴const path = require('path'
) const HTMLPlugin
= require('html-webpack-plugin')
//用來生成打包后的 html 文件const webpack = require('webpack'
) const extractPlugin
= require('extract-text-webpack-plugin')
//將打包后的 css 從文件中抽出來 //判斷開發或生產環境const isDev = process.env.NODE_ENV === 'development'
//配置文件主體(開發和生產公用的部分)const config =
{ target:
'web'
, entry: path.join(__dirname,
'../src/main.js'
), output: { filename:
'bundle.[hash:8].js'
, path: path.join(__dirname,
'../dist/'
) }, module: { //規定文件類型加載的 loader rules: [ { test:/\.vue$/
, loader:
'vue-loader'
}, { test:
/\.jsx$/
, loader:
'babel-loader'
}, { test:
/\.(gif|jpg|jpeg|png|svg)$/
, use: [ { loader:
'url-loader'
, options: { limit:
1024
, name:
'[name]-custom.[ext]'
} } ] } ] }, plugins: [ new webpack.DefinePlugin({'process.env': { NODE_ENV: isDev ? '"development"' : '"production"'
} }), new HTMLPlugin({ filename:'index.html'
}) ] } if (isDev) { config.mode= 'development'
config.devtool
= '#cheap-module-eval-source-map'
config.devServer
=
{ port:
'8080'
, host:
'0.0.0.0',
//相比 localhost ，可以適用於局域網 overlay: { errors: true }, hot: true//熱加載 } config.plugins.push( new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin() ) config.module.rules.push( { test:/\.css$/
, use: [
'style-loader', 'css-loader'
] }, { test:
/\.less$/
, use: [
'style-loader'
,
'css-loader'
, { loader:
'postcss-loader'
, options: { sourceMap: true } },'less-loader'
] } ) } else { config.mode= 'production'
config.entry
=
{ app: path.join(__dirname,
'../src/main.js'
), vendor: [
'vue'
] } config.output.filename
= '[name].[chunkhash:8].js'
config.module.rules.push( { test:
/\.css$/
, use: [
'style-loader', 'css-loader'
] }, { test:
/\.less$/
, use: extractPlugin.extract({ fallback:
'style-loader'
, use: [
'css-loader'
, { loader:
'postcss-loader'
, options: { sourceMap: true } },'less-loader'
] }) } ) config.plugins.push(newextractPlugin('styles.[chunkhash:8].css'
)) config.optimization
=
{ splitChunks: { cacheGroups: { vendor: { name:
'vendor'
} } }, runtimeChunk: true } } module.exports= config
這些看不懂很正常，但是要大概理解是干什么的，不能理解的話， webpack 和相關的 loader 和依賴要補補課了；
根據上面的配置，那么一個個 loader 和依賴就裝起來吧
上面裝完后，會發現：
那么繼續：
裝了 babel 是為了將 ES6 編譯成 ES5，自然還要配置下 .babelrc 文件，這個文件要在主目錄下新建：
{
"presets": ["env"], "plugins": ["transform-vue-jsx"] }
6. 調試
到這里，好像該裝的該配置的都完了，那么我們試試：
結果:
那么繼續:
結果：
這個時候再試試 ：
結果：
我們把 App.vue 和 main.js 打開，給文件加上后綴名 .vue
再試試，npm run dev
根據提示，我們裝下：
結果：
再裝下：
這個時候，沒有提示了，再試試，npm run dev
那么跟之前一樣：
這個時候，也沒提示了，繼續試試，npm run dev
那么跟之前一樣，
這回終於可以了：
打開：localhost:8080，F12，刷新下頁面
會發現兩個錯誤，且頁面空白
第一個錯誤，考慮下也知道了，打開 main.js，給頁面加上一個 #app 就可以了
但是上面的方法，解決不了第二個錯誤，按照提示給的方法，要么換成 render() 函數，要么用包含編譯器的構建；
這里用 render() 函數來解決，因為后者我不會，- -，也就是把上面截圖的代碼換成：
) document.body.appendChild(root) new Vue({ render(h) { return h(App) } }).$mount(root)
這個時候，再來 npm run dev，一切正常：
那么好，我們再試試，npm run build
一切正常，沒報錯，此時的 dist 和所有文件目錄：
用本地服務器打開，一切正常！
7. 上傳 github，上傳之前，文件夾里還要放個文件 .gitignore，里面內容：
.DS_Store node_modules/ npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln
這些文件並沒有什么用，尤其是 node_modules，同步上去的話，可能有幾千甚至上萬個文件，不如自己用的時候 npm install 來得方便。
對比：
總體實現了之后，我們再來和 vue-cli 的文件目錄對比下，左邊是 vue-cli，右邊是自己實現的：
可以發現以下不同：
1. vue-cli 多了 build 目錄
2. vue-cli 的 config 、dist 結構更清楚，分工更明確
3. vue-cli 多了 static 可以放靜態資源
4. vue-cli 多了 eslint、postcss 、editor的配置文件和 index.html 模板
5. vue-cli 引入組件可以省略后綴名
以及支持模板預編譯
總結：
1. 與 vue-cli 相比，不足之處還是不少的，如果要補齊，基本上還要修改配置文件，webpack 和各種 loader 的搭配。
2. 鑒於作者對於 webpack 和 loader 的配置還不夠熟悉，只能做到這里，后面的配置等我再仔細學了 webpack 和 loader ，再來補齊。
最終的項目地址: build-vue-cli-from-zero
參考文檔：
Vue.js 目錄結構
新手向：Vue 2.0 的建議學習順序
從搭建vue-腳手架到掌握webpack配置（二.插件與提取)