0x00.專案初始化

由于整個程序像素級 copy element，所以將不使用vue-cli初始化專案，

創建專案

新建一個空的檔案夾，使用npm init 來初始化專案，并安裝vue模塊，

carbon (17).png

修改目錄結構

根目錄中添加檔案夾

carbon (18).png

根目錄下創建專案組態檔: .gitignore README.md
public目錄下，創建模板頁檔案: favicon.ico index.html
examples目錄下，創建示例入口檔案: App.vue main.js logo.png

0x01.wepack安裝與配置

專案使用webpack實作模塊化管理和打包，

區域安裝webpack

carbon (16).png

webpack-cli最新為4.X版本，webpack-dev-server無法正常運行，安裝時需要指定版本（確保兩模塊版本皆為3.X），

carbon (14).png

webpack-cli 提供了許多命令來使 webpack 的作業變得簡單，官方檔案
webpack-dev-server為你提供了一個簡單的 web server，并且具有 live reloading(實時重新加載) 功能，官方檔案

安裝 webpack loaders

webpack 使用 loader 對檔案進行預處理，可以構建包括 JavaScript 在內的任何靜態資源，
官方插件串列
webpack 插件中文檔案

carbon (15).png

參考
vue-loader詳解： https://segmentfault.com/a/1190000020629508
html-webpack-plugin詳解：https://www.cnblogs.com/wonyun/p/6030090.html

webpack配置

在build目錄下創建webpack組態檔webpack.config.js,提供入口(entry)、模式（Mode）、輸出(output)、模塊（Module）、插件(Plugins)、開發服務器(DevServer)等配置選項，官方檔案

carbon (11).png

0x02.專案運行

npm scripts 配置

在npm腳本中新增webpack命令，執行的命令會自動去node_modules尋找，不用加上目錄，

修改package.json配置

.
...
"scripts": { 
    "build:dist": "webpack --config  build/webpack.config.js",
    "dev": "webpack-dev-server --config build/webpack.config.js"
},
...
.

cross-env配置

cross-env是一款運行跨平臺設定和使用環境變數的腳本，不同平臺使用唯一指令，無需擔心跨平臺問題，

carbon (13).png

修改package.json配置

.
...
"scripts": { 
    "build:dist": "cross-env NODE_ENV=development webpack --config  build/webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js"
},
...
.