webpack之webpack-dev-server 与 webpack-hot-server

枫叶飞翔

　　最近在弄框架，用到了webpack打包，当然不可避免的遇到了开发实际问题。在实际开发中，我们不可能改一个文件，就去构建一次，于是想到了实时更新。查看webpack，看到了webpack-dev-server。
　　webpack-dev-server
　　webpack已经想到了开发流程中的自动刷新，这就是webpack-dev-server。它是一个静态资源服务器，类似express服务器，只用于开发环境。一般来说，对于纯前端的项目（全部由静态html文件组成），简单地在项目根目录运行webpack-dev-server，然后打开浏览器 默认端口是8080，即http://localhost:8080就可以看到我们的页面了，修改任意关联的源文件并保存，webpack编译就会运行，并在运行完成后通知浏览器自动刷新。
　　其原理呢，就是根据所写的webpack.config.js文件，当改变entry中所涉及到的文件时，此时就会监听到并自动刷新浏览器。注意，这里生成的文件都是保存在内存中的，不会写入文件目录。因此我们改动文件，就不用再次构建，立即能看到效果，是不是很爽啊。哈哈，但是不要高兴。它也是有缺点的。
　　缺点：如果在请求某个静态资源的时候，webpack编译还没有运行完毕，webpack-dev-server不会让这个请求失败，而是会一直阻塞它，直到webpack编译完毕。这个对应的效果是，如果你在不恰当的时候刷新了页面，不会看到错误，而是会在等待一段时间后重新看到正常的页面，就好像“网速很慢”。
　　为了解决这个问题，webpack-hot-server应运而生。
　　webpack-hot-server
　　webpack-hot-middleware是一个结合webpack-dev-middleware使用的middleware，它可以实现浏览器的无刷新更新（hot reload）。这也是webpack文档里常说的HMR（Hot Module Replacement）。
　　建议看下具体实例：https://github.com/glenjamin/webpack-hot-middleware/tree/master/example。下载下来后，在example文件下，执行npm install，然后在浏览器中访问，http://localhost:1616/,然后改动client.js, 观察浏览器。你会发现浏览器更新了，但是没有刷新操作。
　　webpack.config.js文件：



var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: [
// Add the client which connects to our middleware
// You can use full urls like 'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr'
// useful if you run your app from another point like django
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
// And then the actual application
'./client2.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
devtool: '#source-map',
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
};

　　其中，webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000，开头：webpack-hot-middleware/client，这个你直接粘贴就好，我测试下来这个client和上下文无关。而? 后面的 path=/__webpack_hmr&timeout=20000 ,其中path有HMR服务监听，timeout应该是知道失联的话，达到20000毫秒就算超时，不必再做尝试。
　　另外再就是server.js文件，文件中已经加了注释，这里就不再赘述。
　　有不同意见的话，可以提给我，大家共同探讨。