专栏首页IMWeb前端团队webpack热更新配置小结

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 条评论
登录 后参与评论

相关文章

  • webpack热更新配置小结

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

    IMWeb前端团队
  • 教程:从零开始使用webpack 4, Babel 7创建一个React项目(2018)

    看到一篇还不错的文章,翻译(也不是完全翻译,还是改动了一点点让它变得更易理解)了一波,想看原文的移步这里。

    IMWeb前端团队
  • 开放-封闭原则(OCP,Open - Closed Priciple)

    开放-封闭原则(OCP,Open - Closed Priciple) 1 前言 害羞地看完了《单一职责简述》,自然想到了另外一个重要的原则——开放&封闭原则 ...

    IMWeb前端团队
  • webpack中的HMR(热更新)原理剖析

    Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpa...

    winty
  • Webpack系列——关于Webpack-dev-server配置的点点滴滴

    我们都知道webpack-dev-server为我们在开发的时候提供了一个服务器以便于我们的开发,我们在使用之前当然需要安装:

    用户1515472
  • webpack-dev-server disableHostCheck导致 invalid host header

    今天遇到一个问题,访问webpack启动的server,直接使用localhost和127.0.0.1都可以正常访问,但是修改了host,使用hostname访...

    frontoldman
  • Webpack03-前端服务配置及热更新

    https://jspang.com/posts/2017/09/16/webpack3.html#%E7%AC%AC04%E8%8A%82%EF%BC%9A%...

    专注APP开发
  • (4/24) webpack3.x快速搭建本地服务和实现热更新

    (1)为了防止版本兼容问题,此处的webpack版本与之前的一致为:webpack@3.6.0。同时这里我们安装的webpack-dev-server版本是2....

    wfaceboss
  • 最适合新人的-webpack配置实例(1)

    webpack这东西配置项比较多,讲起来比较琐碎,整个视频大概一个多小时,放在微信公众号上来发的话,基本上不太可能有人会看得完。

    web前端教室
  • 1、webpack从0到1-开始

    Ewall

扫码关注云+社区

领取腾讯云代金券