UDN-企业互联网技术人气社区

板块导航

浏览  : 1834
回复  : 10

[前端] webpack热更新配置小结

[复制链接]
htmlman的头像 楼主
发表于 2017-2-10 11:12:13 | 显示全部楼层 |阅读模式
  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为例)
  1. npm i —save koa-webpack
复制代码

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

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

  之前这里是使用server来刷新内容的,这种场景下是去掉了 webpack-dev-server 插件而使用 webpack-hot-middleware 实现
  1. entry: {
  2.     index: ['react-hot-loader/patch',
  3.       'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
  4.       './src/index.js'
  5.     ]
  6.   }
复制代码

  第三步,在server中require这个中间件
  1. const webpackMiddleware = require('koa-webpack');
  2. const config = require('./webpack.config.babel');
复制代码

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

  这里主要是 config 参数和 dev.publicPath ,其他参数可选而已,这里列出来看看
  1. app.use(webpackMiddleware({
  2.     config: config,
  3.     dev: {
  4.       publicPath: config.output.publicPath,
  5.       // public path to bind the middleware to
  6.       // use the same as in webpack
  7.       // publicPath is required, whereas all other options are optional
  8.       noInfo: false
  9.     }
  10.   }));
复制代码

  第五步,修改启动server
  1. const http = require('http');
  2. const server = http.createServer(app.callback());
  3. server.listen(8080, () => {
  4.   console.log('server running at http://127.0.0.1:8080');
  5. });
复制代码

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

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

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

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部