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. 生成环境和测试环境区分构建配置文件(好像是废话)

[转] webpack热更新配置小结的更多相关文章

  1. webpack热更新和常见错误处理

    时间:2016-11-03 10:50:54 地址:https://github.com/zhongxia245/blog/issues/45 webpack热更新 一.要求 局部刷新修改的地方 二. ...

  2. webpack热更新实现

    原文地址:webpack热更新实现 webpack,一代版本一代神,代代版本出大神.如果你的webpack和webpack-dev-server版本大于2小于等于3.6,请继续看下去.其它版本就必浪费 ...

  3. 轻松理解webpack热更新原理

    一.前言 - webpack热更新 Hot Module Replacement,简称HMR,无需完全刷新整个页面的同时,更新模块.HMR的好处,在日常开发工作中体会颇深:节省宝贵的开发时间.提升开发 ...

  4. koa和egg项目webpack热更新实现

    背景 在用Node.js+Webpack构建的方式进行开发时, 我们希望能实现修改代码能实时刷新页面UI的效果. 这个特性webpack本身是支持的, 而且基于koa也有现成的koa-webpack- ...

  5. Webpack 多html入口、devServer、热更新配置

    一.clean-webpack-plugin: 在每次生成dist目录前,先删除本地的dist文件(每次自动删除太麻烦) 1.安装clean-webpack-plugin   npm/cnpm i c ...

  6. webpack热更新问题和antd design字体图标库扩展

    标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后 ...

  7. koa2 + webpack 热更新

    网上有很多express+webpack的热更新,但是koa2的很少,这两天研究了一下子,写一个简单的教程. 1.需要的包 webpack:用于构建项目 webpack-dev-middleware: ...

  8. webpack 热更新

    1.安装webpack npm install webpack -g  //全局安装 npm install webpack --save-dev  //开发环境 2.使用webpack 创建一个we ...

  9. webpack热更新 同时导出文件到本地

    webpack 配置热更新后,文件配置导出到本地 安装 npm i webpack-dev-server-output --save-dev 引入 const WebpackDevServerOutp ...

随机推荐

  1. golang基础数据结构链表

    链表 链表(Linked list),是一种线性表,但是并不会按线性的顺序存储数据,而是在每一个节点里存到下一个节点的指针(Pointer). 每个节点包含下一个节点的地址,这样把所有的节点串起来了, ...

  2. mysql中sql语句的常用语句

    1:提取公共的sql语句: 2:动态添加----sql语句: 代码: <insert id="test1" parameterType="com.floor.sho ...

  3. crosstab(unknown, unknown) does not exist

    在pgadminIII用到交叉表时,给报了函数不存在 解决方法: 执行sql CREATE EXTENSION tablefunc; 结果 Query returned successfully wi ...

  4. Python分析网页中的<a>标签

    soup = BeautifulSoup(html,"html.parser") html=soup.select("table a") for k in ht ...

  5. SQL语句——重复记录

    1.查找重复记录: (按id查找) select * from user_info where id in ( select id from user_info group by id ) 即:sel ...

  6. 20155337 2016-2017-2 《Java程序设计》第七周学习总结

    20155337 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 •认识时间与日期 •格林威治标准时间:简称GMT时间,参考格林威治皇家天文台的标准太阳时间. ...

  7. 目标提取深度神经网络分析权衡 trade offs

    RCNN: 直接使用object proposal 方法得到image crops 送入神经网络中,但是crops 的大小不一样,因此使用 ROI Pooling,这个网络层可以把不同大小的输入映射到 ...

  8. Ubuntu16.04搭建QingdaoU(docker一键式部署)

    QDUOJ已经开源到2.0版本了,下面的教程不再适用,仅做纪念吧! 这几天装什么Linux.开源OJ上瘾了...竟然没去刷题...嗯,做好记录就写题啦! 先上原始网站的图: 风格不错,很符合我的口味. ...

  9. 如何利用 Python 完成验签操作

    柠檬班Python8期的佑佑以及Python7期的掠掠同学昨天都私下问华华老师如何利用Python完成验签的操作. 今天我们就以佑佑的例子来跟大家进行简单的说明以及操作! 一.什么是验签: 用非常简单 ...

  10. stm32中字节对齐问题(__align(n),__packed用法)

    ARM下的对齐处理   from DUI0067D_ADS1_2_CompLib 3.13 type  qulifiers 有部分摘自ARM编译器文档对齐部分  对齐的使用:  1.__align(n ...