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

有不一樣意見的話，能夠提給我，你們共同探討。