在honeypack中啓用HMR

honeypack

honeypack是一個基於webpack，結合了不同項目開發習慣，編寫而成的開源前端打包工具。

功能

1. 支持獨立啓動一個dev server
2. 支持作爲express的中間件
3. 支持純打包模式

特性

• 通過簡單地問答就能生成一份完整實用的webpack配置文件，並且自動安裝依賴，接着你可以根據自己項目的特點隨意修改，想加loader隨意加，想改plugin的參數隨意改，不想要的配置隨意刪，沒有做不到的定製內容。
• [計劃中]自動升級webpack配置文件，支持最新特性。比如自動把uglifyjs換成terser，讓你把全部精力都放在app開發上。

瞭解更多

HMR

HMR-熱更新指的是當前端任何被引用到的文件發生變化時，服務器能自動推送新的文件到瀏覽器，並且能把修改的地方立即體現出來，而不用刷新頁面。

瞭解更多

如何在honeypack中支持HMR

這裏只介紹在中間件形式下開啓HMR的方法，如果是獨立啓動一個server，參考官方文檔

1. 設置參數hot爲true

   // honeycomb
   
   webpack: {
     enable: true,
     module: 'honeypack',
     router: '/assets',
     config: {
       hot: true    // <------- 這個
     }
   }
   
   // express
   
   app.use(honeypack({
     config: 'webpack.config.js',
     root: './assets',
     hot: true    // <------- 這個
   }));

2. 修改webpack.config.js文件

     entry: {
   -   app: './index.jsx'
   +   app: [
   +     `honeypack/client?path=${publicPath}/__webpack_hmr`,
   +     './index.jsx'
   +   ]
     }
   
     plugins: [
   +   new webpack.HotModuleReplacementPlugin(),
     ]
   
   
   * publicPath爲output中的publicPath

這個時候刷新一下頁面，就會發現多了一個http://${host}/${publicPath}/__webpack_hmr的請求。

1. 修改前端項目代碼

   1. 集成更新

      1. react

         • 給頂層組件加上hot()方法

           import React from 'react';
           import ReactDOM from 'react-dom';
           import {hot} from 'react-hot-loader/root';
           
           const App = () => <div>Hello Word!</div>;
           const Wrap = hot(App);
           
           ReactDOM.render(<Wrap />, $DOM);

          刷新一下瀏覽器頁面，看見`Hello Word!`後，在文件裏把`Word`改成`World`，回到瀏覽器，就會看見已經是`Hello World!`了

        + [推薦的可選步驟] 在`webpack.config.js`中，給`babel-loader`增加一個plugin

// babel-loader
  plugins: [
+   'react-hot-loader/babel'
  ]

    2. [其他框架](https://webpack.js.org/guides/hot-module-replacement/#other-code-and-frameworks)

2. 手動更新

  手動更新的思路是服務器會主動推送被修改過的文件，然後前端根據不同的文件手動進行不同的操作。

  [瞭解更多](https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr)