转载来源：
https://www.talkingcoder.com/article/6310080842228107877
一、vue+vueRouter+webpack
- 开发环境和生产环境的配置文件（webpack.dev.config.js和webpack.prod.config.js）
- 入口html文件由webpack生成，模板在src/template/index.html内
-
git提交忽略文件
Paste_Image.png
二、安装
首先安装node和npm
// 注意,需要提前在全局安装webpack和webpack-dev-server,如果已安装请忽略
npm install webpack -g
npm install webpack-dev-server -g
// 安装成功后,再安装依赖
npm install
三、运行
开发环境
首次运行需要执行init命令生成html入口文件，以后不再执行
npm run init
执行dev，本地环境运行，默认端口8080，有冲突先kill
npm run dev
生产环境(打包)
执行build方法进行编译打包，生产环境默认用hash模式的路由，开发环境是History模式。直接打开index_prod.html即可访问生产环境
npm run build
四、webpack配置详解
-
entry 入口的配置项
Paste_Image.png -
output 输出配置
Paste_Image.png
path：文件输出到本地的路径；
publicPath：文件的引用路径；
filename：主入口文件名；
chunkFilename：每个路由编译后的文件名，【hash】是唯一标识文件，用于防止缓存。 -
loaders
Paste_Image.png babel：将ES6转化成ES5
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},-
plugins ：插件
Paste_Image.png
