[Vue+Webpack] - Vue+Webpack开发可复用的单页面富应用教程（配置篇）

转载来源：
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