在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)