“热更新”：对应的是 ‘webpack-dev-middleware‘ 中间件
“热加载”：对应的是 ‘webpack-hot-middleware‘ 中间件
为了使用这两个中间件，必须修改“webpack.config.js"和”server.js“
webpack配置文件(“webpack.config.js")和上一篇博文写的大致相同，下面给出一个vue+webpack开发常用的配置：
const path = require(‘path‘); const htmlPlugin = require(‘html-webpack-plugin‘); const webpack = require(‘webpack‘); module.exports = { entry: [‘webpack-hot-middleware/client‘,‘./index.js‘], output:{ path: path.resolve(__dirname,‘./dist‘), filename: ‘[name].bundle.js‘ }, plugins:[ new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), new htmlPlugin({ template: path.resolve(__dirname,‘./index.html‘) }) ], resolve:{ extensions: [‘.js‘,‘.vue‘], alias:{ ‘vue‘:‘vue/dist/vue.js‘ } }, module:{ loaders:[ { test: /\.js$/, loader: ‘babel-loader?presets=env‘, include: path.resolve(__dirname,‘src‘) },{ test: /\.vue$/, loader: ‘vue-loader‘, include: path.resolve(__dirname,‘src‘) } ] } }
值得注意的是entry和plugins的变化：
entry多引入了一个‘webpack-hot-middleware/client‘入口文件 ,这个很明显就是一个核心为“window.location.reload();”的js文件，用于刷新浏览器，生成的时候会被webpack一并打包进bundle.js
plugins多了两个:
new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()
官方解释大概是说用来替换一些字解释，使得错误界面不会太乱。
你会发现这两处改写都是为了‘webpack-hot-middleware‘刷新浏览中间件而改写的。
express的写法(server.js)如下：
const express = require(‘express‘); const webpack = require(‘webpack‘); const config = require(‘./webpack.config.js‘); //给webpack带上配置 const compiler = webpack(config); //自动更新编译代码中间件 const devMiddleWare = require(‘webpack-dev-middleware‘)(complier,{}); //自动刷新浏览器中间件 const hotMiddleWare = require(‘webpack-hot-middleware‘)(compiler); const server = express(); //调用2个中间件 server.use(devMiddleWare); server.use(hotMiddleWare); server.listen(8088);
完事儿～～
这个时候你去试下修改app.vue那些文件，你就会发现编译的代码自动刷新了～～
