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文件，文件中已经加了注释，这里就不再赘述。

有不同意见的话，可以提给我，大家共同探讨。