轉(zhuǎn)載來源：
https://www.talkingcoder.com/article/6310080842228107877
一、vue+vueRouter+webpack
- 開發(fā)環(huán)境和生產(chǎn)環(huán)境的配置文件（webpack.dev.config.js和webpack.prod.config.js）
- 入口html文件由webpack生成省古，模板在src/template/index.html內(nèi)
-
git提交忽略文件
Paste_Image.png
二、安裝
首先安裝node和npm
// 注意,需要提前在全局安裝webpack和webpack-dev-server,如果已安裝請忽略
npm install webpack -g
npm install webpack-dev-server -g
// 安裝成功后,再安裝依賴
npm install
三召调、運行
開發(fā)環(huán)境
首次運行需要執(zhí)行init命令生成html入口文件，以后不再執(zhí)行
npm run init
執(zhí)行dev畸裳，本地環(huán)境運行右冻，默認端口8080，有沖突先kill
npm run dev
生產(chǎn)環(huán)境(打包)
執(zhí)行build方法進行編譯打包腺逛，生產(chǎn)環(huán)境默認用hash模式的路由荷愕，開發(fā)環(huán)境是History模式。直接打開index_prod.html即可訪問生產(chǎn)環(huán)境
npm run build
四棍矛、webpack配置詳解
-
entry 入口的配置項
Paste_Image.png -
output 輸出配置
Paste_Image.png
path：文件輸出到本地的路徑安疗；
publicPath：文件的引用路徑；
filename：主入口文件名够委；
chunkFilename：每個路由編譯后的文件名荐类，【hash】是唯一標識文件，用于防止緩存茁帽。 -
loaders
Paste_Image.png babel：將ES6轉(zhuǎn)化成ES5
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},-
plugins ：插件
Paste_Image.png
