moonye

2017-02-04 23:13

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.pathoutput.publicPath来控制)
  3. 生成环境和测试环境区分构建配置文件(好像是废话)
0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。