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