從零開始搭建vue+webpack環境，坑很多，各種plugins和loader眼花繚亂，最關鍵的是很多loader隨着webpack4升級也是大改造，新版本在webpack3上直接用不了。下面關鍵記錄些東西和版本
1. webpack
- webpack@3.12.0
- webpack-dev-server@2.9.1
webpack負責vue工程的構建，webpack-dev-server實現了在開發階段高效的自動編譯預覽
2. vue
- vue@2.5.17
- vue-loader@14.2.3
- vue-template-compiler@2.5.2
vue編譯好的項目必須在web服務器環境（包括webpack-dev-server）下執行，否則字體和樣式會找不到
vue-loader 將 *.vue文件中的 <template>、<script> 和 <style> 拆分，導出一個CommonJS模塊的 Vue組件對象。
3. css
- css-loader@0.28.11
- less@2.7.3
- less-loader@4.0.5
- postcss-loader@2.1.6
- postcss-cssnext@3.1.0
- sass-resources-loader@1.3.3
css-loader 用於解析原生css，或者解析 vue-loader 導出的css部分，並將它們寫到 <head> 中
less-loader 用於將less語法解析為css語法
postcss-loader 解析postcss語法，postcss-cssnext允許在項目中使用下一代css最新語法，比如在新語法中自動加瀏覽器前綴
3. babel
- babel-core@6.26.3
- babel-loader@7.1.5
- babel-preset-env@1.7.0
babel用於將js新語法轉換成瀏覽器識別的es5語法，可以使得開發中直接使用es6新語法而不用擔心兼容問題。
babel-core和babel-loader必須安裝，babel-preset-env指定轉換最新語法
3. 文件資源
- url-loader@0.5.9
- file-loader@1.1.11
除了上面的配置解析js語法和css之外，項目中必不可少的還有圖片，字體等文件資源，在webpack構建時它們自然也需要loader去處理。這個時候就需要使用url-loader，url-loader依賴file-loader，可以根據資源大小選擇生成圖片還是base64編碼
