[转] webpack热更新配置小结
webpack热更新配置
热更新,可以使开发的人在修改代码后,不用刷新浏览器即可以看到修改后的效果。而它的另一个好处则是可以只替换修改部分相关的代码,大大的缩短了构建的时间。
热更新一般会涉及到两种场景下面的使用,一个是项目属于纯前端资源的,另一种是node工程项目。
纯前端资源配置
配置过程内容比较多,这里大致描述下实现热更新能力需要做些什么。
首先安装相关的包,会发现热更新的能力主要是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');
});
启动程序后查看效果,修改代码后直接看浏览器内容是否更新
上面过程中可能遇到的问题
- 无法热更新,可能是服务器配置端口和构建中热更新插件的端口或路径不一致
- 入口js文件编译后,生成的资源的路径由参数
dev.publicPath
决定(因为文件是生成在内存中,由外部文件服务器来管理。这里不同于之前纯前端场景下路径由output.path
和output.publicPath
来控制) - 生成环境和测试环境区分构建配置文件(好像是废话)
[转] webpack热更新配置小结的更多相关文章
- webpack热更新和常见错误处理
时间:2016-11-03 10:50:54 地址:https://github.com/zhongxia245/blog/issues/45 webpack热更新 一.要求 局部刷新修改的地方 二. ...
- webpack热更新实现
原文地址:webpack热更新实现 webpack,一代版本一代神,代代版本出大神.如果你的webpack和webpack-dev-server版本大于2小于等于3.6,请继续看下去.其它版本就必浪费 ...
- 轻松理解webpack热更新原理
一.前言 - webpack热更新 Hot Module Replacement,简称HMR,无需完全刷新整个页面的同时,更新模块.HMR的好处,在日常开发工作中体会颇深:节省宝贵的开发时间.提升开发 ...
- koa和egg项目webpack热更新实现
背景 在用Node.js+Webpack构建的方式进行开发时, 我们希望能实现修改代码能实时刷新页面UI的效果. 这个特性webpack本身是支持的, 而且基于koa也有现成的koa-webpack- ...
- Webpack 多html入口、devServer、热更新配置
一.clean-webpack-plugin: 在每次生成dist目录前,先删除本地的dist文件(每次自动删除太麻烦) 1.安装clean-webpack-plugin npm/cnpm i c ...
- webpack热更新问题和antd design字体图标库扩展
标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后 ...
- koa2 + webpack 热更新
网上有很多express+webpack的热更新,但是koa2的很少,这两天研究了一下子,写一个简单的教程. 1.需要的包 webpack:用于构建项目 webpack-dev-middleware: ...
- webpack 热更新
1.安装webpack npm install webpack -g //全局安装 npm install webpack --save-dev //开发环境 2.使用webpack 创建一个we ...
- webpack热更新 同时导出文件到本地
webpack 配置热更新后,文件配置导出到本地 安装 npm i webpack-dev-server-output --save-dev 引入 const WebpackDevServerOutp ...
随机推荐
- golang基础数据结构链表
链表 链表(Linked list),是一种线性表,但是并不会按线性的顺序存储数据,而是在每一个节点里存到下一个节点的指针(Pointer). 每个节点包含下一个节点的地址,这样把所有的节点串起来了, ...
- mysql中sql语句的常用语句
1:提取公共的sql语句: 2:动态添加----sql语句: 代码: <insert id="test1" parameterType="com.floor.sho ...
- crosstab(unknown, unknown) does not exist
在pgadminIII用到交叉表时,给报了函数不存在 解决方法: 执行sql CREATE EXTENSION tablefunc; 结果 Query returned successfully wi ...
- Python分析网页中的<a>标签
soup = BeautifulSoup(html,"html.parser") html=soup.select("table a") for k in ht ...
- SQL语句——重复记录
1.查找重复记录: (按id查找) select * from user_info where id in ( select id from user_info group by id ) 即:sel ...
- 20155337 2016-2017-2 《Java程序设计》第七周学习总结
20155337 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 •认识时间与日期 •格林威治标准时间:简称GMT时间,参考格林威治皇家天文台的标准太阳时间. ...
- 目标提取深度神经网络分析权衡 trade offs
RCNN: 直接使用object proposal 方法得到image crops 送入神经网络中,但是crops 的大小不一样,因此使用 ROI Pooling,这个网络层可以把不同大小的输入映射到 ...
- Ubuntu16.04搭建QingdaoU(docker一键式部署)
QDUOJ已经开源到2.0版本了,下面的教程不再适用,仅做纪念吧! 这几天装什么Linux.开源OJ上瘾了...竟然没去刷题...嗯,做好记录就写题啦! 先上原始网站的图: 风格不错,很符合我的口味. ...
- 如何利用 Python 完成验签操作
柠檬班Python8期的佑佑以及Python7期的掠掠同学昨天都私下问华华老师如何利用Python完成验签的操作. 今天我们就以佑佑的例子来跟大家进行简单的说明以及操作! 一.什么是验签: 用非常简单 ...
- stm32中字节对齐问题(__align(n),__packed用法)
ARM下的对齐处理 from DUI0067D_ADS1_2_CompLib 3.13 type qulifiers 有部分摘自ARM编译器文档对齐部分 对齐的使用: 1.__align(n ...