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文件，文件中已經加了注釋，這里就不再贅述。

有不同意見的話，可以提給我，大家共同探討。