webpack热更新配置小结

本文作者：IMWeb moonye 原文出处：IMWeb社区 未经同意，禁止转载

webpack热更新配置

热更新，可以使开发的人在修改代码后，不用刷新浏览器即可以看到修改后的效果。而它的另一个好处则是可以只替换修改部分相关的代码，大大的缩短了构建的时间。

热更新一般会涉及到两种场景下面的使用，一个是项目属于纯前端资源的，另一种是node工程项目。

纯前端资源配置

完整工程项目可参考github上面demo配置或者官方示例

配置过程内容比较多，这里大致描述下实现热更新能力需要做些什么。

首先安装相关的包，会发现热更新的能力主要是webpack-dev-server实现，它提供一个本地服务器，并且在内容发生变化时更新浏览器内容。而react-hot-loader主要作用是重刷react组件，非react项目中不要，这样配置又简化了。

然后在构建的配置文件中需要做一些配置，该配置作用是将热更新所需要的代码注入到入口js文件中

配置完成后，你只需要修改代码，静静的看着浏览器更新就好了。

react-hot-loader这个组件比较强大，可以在redux或者react native项目中使用。

node工程资源配置

这里配置方法与上面类似，在此基础之上多了一些配置

demo在github上可下载运行

首先， 我们需要一个中间件，嵌入到server中（server以koa2为例）

npm i —save koa-webpack

koa-webpack其中主要依赖两个包webpack-dev-middleware和webpack-hot-middleware, 拆开来使用也可以，配置也都类似

第二步，修改构建配置文件

之前这里是使用server来刷新内容的，这种场景下是去掉了webpack-dev-server插件而使用webpack-hot-middleware实现

entry: {
    index: ['react-hot-loader/patch',
      'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
      './src/index.js'
    ]
  }

第三步，在server中require这个中间件

const webpackMiddleware = require('koa-webpack');
const config = require('./webpack.config.babel');

第四步， 配置server所需要的参数

这里主要是config参数和dev.publicPath,其他参数可选而已，这里列出来看看

app.use(webpackMiddleware({
    config: config,
    dev: {
      publicPath: config.output.publicPath,
      // public path to bind the middleware to
      // use the same as in webpack
      // publicPath is required, whereas all other options are optional
      noInfo: false
    }
  }));

第五步，修改启动server

const http = require('http');
const server = http.createServer(app.callback());
server.listen(8080, () => {
  console.log('server running at http://127.0.0.1:8080');
});

启动程序后查看效果，修改代码后直接看浏览器内容是否更新

上面过程中可能遇到的问题

1. 无法热更新，可能是服务器配置端口和构建中热更新插件的端口或路径不一致
2. 入口js文件编译后，生成的资源的路径由参数dev.publicPath决定（因为文件是生成在内存中，由外部文件服务器来管理。这里不同于之前纯前端场景下路径由output.path和output.publicPath来控制）
3. 生成环境和测试环境区分构建配置文件（好像是废话）