Comments (2)
书中是有提到加module.hot.accept()
的,这是书中的描述:
可见补丁中包含了 main.css
文件新编译出来 CSS 代码,网页中的样式也立刻变成了源码中描述的那样。
但当你修改 main.js
文件时,会发现模块热替换没有生效,而是整个页面被刷新了,为什么修改 main.js
文件时会这样呢?
Webpack 为了让使用者在使用了模块热替换功能时能灵活地控制老模块被替换时的逻辑,可以在源码中定义一些代码去做相应的处理。
把的 main.js
文件改为如下:
import React from 'react';
import { render } from 'react-dom';
import { AppComponent } from './AppComponent';
import './main.css';
render(<AppComponent/>, window.document.getElementById('app'));
// 只有当开启了模块热替换时 module.hot 才存在
if (module.hot) {
// accept 函数的第一个参数指出当前文件接受哪些子模块的替换,这里表示只接受 ./AppComponent 这个子模块
// 第2个参数用于在新的子模块加载完毕后需要执行的逻辑
module.hot.accept(['./AppComponent'], () => {
// 新的 AppComponent 加载成功后重新执行下组建渲染逻辑
render(<AppComponent/>, window.document.getElementById('app'));
});
}
其中的 module.hot
是当开启模块热替换后注入到全局的 API,用于控制模块热替换的逻辑。
现在修改 AppComponent.js
文件,把 Hello,Webpack
改成 Hello,World
,你会发现模块热替换生效了。
但是当你编辑 main.js
时,你会发现整个网页被刷新了。为什么修改这两个文件会有不一样的表现呢?
当子模块发生更新时,更新事件会一层层往上传递,也就是从 AppComponent.js
文件传递到 main.js
文件,
直到有某层的文件接受了当前变化的模块,也就是 main.js
文件中定义的 module.hot.accept(['./AppComponent'], callback)
,
这时就会调用 callback
函数去执行自定义逻辑。如果事件一直往上抛到最外层都没有文件接受它,就会直接刷新网页。
那为什么没有地方接受过 .css
文件,但是修改所有的 .css
文件都会触发模块热替换呢?
原因在于 style-loader
会注入用于接受 CSS 的代码。
from dive-into-webpack.
@gwuhaolin 我现在直接下载 4.6 章的代码,直接运行npm run dev:hot,没有热更新。
from dive-into-webpack.
Related Issues (20)
- 请教一下关于sourceMap的问题
- 关于电子书 HOT 2
- 4-1 & 4-5 中的一些错别字 HOT 1
- css-loader配置异常 HOT 1
- star虚高,不实用
- 4.9 针对css配置的CDN是不是写错了
- 5.2 输出文件分析-分割代码时的输出, 0.bundle.js的moreModules数组缺少一个空项,会导致modules[0]被覆盖,无法取到modules[1]
- 1.4 loader的使用,webpack编译失败 HOT 2
- 3-10错别字
- 请问除了webpack-dev-server启动服务外还有什么可以支持启动服务的?
- 关于控制打包输出结构的问题
- 1-5 webpack-dev-server和脚手架CLI使用的解决方法
- 1-5 中的 extract-text-webpack-plugin 已废弃 HOT 1
- 1-2 错别字
- webpack5中css-loader的options貌似不支持minimizer
- 4-13提升代码性能Prepack:'cannot read property 'compilation' of undefined'错误
- 电子书 HOT 1
- compiler.plugin
- 可以标注下webpack版本
- 制作了EPUB
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dive-into-webpack.