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

   // honeycombwebpack: {  enable: true,  module: 'honeypack',  router: '/assets',  config: {    hot: true    // <------- 这个  }}// expressapp.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 = () => 
                       
                        Hello Word!
                       
           ;const Wrap = hot(App);ReactDOM.render(
                       , $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)