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

webpack热更新配置小结

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 moonye 原文出处:IMWeb社区 未经同意,禁止转载 webpack热更新配置 热更新,可以使开发的人在修改代码后,不用刷...

    IMWeb前端团队
  • webpack原理与实战

    webpack是一个js打包工具,不一个完整的前端构建工具。它的流行得益于模块化和单页应用的流行。webpack提供扩展机制,在庞大的社区支持下各种场景基本它都...

    IMWeb前端团队
  • webpack原理与实战

    本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 image.png webpack是一个js打包工具,不一个完整的前端...

    IMWeb前端团队
  • 入职第一天:leader手把手教我入门Vue服务器端渲染(SSR)

    今天是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR)。

    闰土大叔
  • 轻松理解webpack热更新原理

    HMR作为一个Webpack内置的功能,可以通过HotModuleReplacementPlugin或--hot开启。那么,HMR到底是怎么实现热更新的呢?下面...

    Nealyang
  • NPS详情

    由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,雷神众测以及文章作者不为此承担任何责任。 雷神众测拥有对此文章的修改和...

    安恒网络空间安全讲武堂
  • webpack打包过程如何调试?

    本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶。

    Jerry Wang
  • 【转】分布式协调服务ZooKeeper工作原理ZooKeeper是什么整体结构工作流程

    大数据处理框架Hadoop、Redis分布式服务Codis、淘宝的分布式消息中间件MetaMQ ……他们都使用ZooKeeper做为基础部件,可以看出ZooKe...

    阿杜
  • 01-React搭建react环境及SCSS的配置

    张风捷特烈
  • 三步让你的win10快到飞起

    经典的三步走战略: 1、 win+r键打开cmd 2、输入chkdsk,回车后耐心等待 如果出现[访问被拒绝,因为你没有足够的特权,你必须调用这个在提升模...

    赵帆同学GXUZF.COM

扫码关注云+社区

领取腾讯云代金券