随着深入学习,新的知识点不断出现,一些知识点可能涉及到很深的知识架构,这里只是简单的接触,并不深入,在以后深入使用时再做详细介绍。
模块热替换
模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新。
这里是他的一个详细概念。
前面说了, 使用 webpack-dev-server 可以实现浏览器自动加载、自动重新加载编译后的代码,这就是页面的自动刷新,但这里的刷新,是页面整体的完全刷新,而模块热替换,实现的是页面模块(比如一个按钮的功能修改)的更新,而无需重新加载整个页面。
启用 HMR 功能第一步
HMR 的启用十分简单,
一、首先是更新 webpack-dev-server 的配置,和使用 webpack 内置的 HMR 插件即可。同时删掉 print.js 的入口起点,因为它现在正被 index.js 模块使用
webpack-dev-server
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');
+ const webpack = require('webpack');module.exports = {
entry: {
- app: './src/index.js',
- print: './src/print.js'
+ app: './src/index.js'},devtool: 'inline-source-map',devServer: {
contentBase: './dist',
+ hot: true},plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({
title: 'Hot Module Replacement'}),
+ new webpack.HotModuleReplacementPlugin()],output: {
filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};
二、修改 index.js 文件,以便当 print.js 内部发生变更时可以告诉 webpack 接受更新的模块
index.js
...document.body.appendChild(component());
+
+ if (module.hot) {
+ module.hot.accept('./print.js', function() {
+ console.log('Accepting the updated printMe module!');
+ printMe();
+ })
+ }
三、命令行启用服务 npm start
四、更改 print.js 中 console.log 的输出内容
print.js
export default function printMe() {
- console.log('I get called from print.js!');
+ console.log('Updating print.js...')}
显示器输出如下
console
以上,就启用了 HMR 功能,实现了单击按钮模块的热更新,但这里还有个小问题,就是如果继续点击示例页面上的按钮,会发现控制台仍在打印这旧的 printMe 功能。
启用 HMR 功能第二步
使用 module.hot.accept 更新绑定到新的 printMe 函数上
index.js
...- document.body.appendChild(component());
+ let element = component(); // 当 print.js 改变导致页面重新渲染时,重新获取渲染的元素
+ document.body.appendChild(element);if (module.hot) {
module.hot.accept('./print.js', function() {
console.log('Accepting the updated printMe module!');
- printMe();
+ document.body.removeChild(element);
+ element = component(); // 重新渲染页面后,component 更新 click 事件处理
+ document.body.appendChild(element);})}
这样,但修改 print.js 的输出内容后,页面实现自动刷新,当再次点击按钮时,输出内容会更改
使用 HMR 修改样式表
借助于 style-loader 的帮助,CSS 的模块热替换实际上是相当简单的。当更新 CSS 依赖模块时,此 loader 在后台使用 module.hot.accept 来修补(patch)
一、安装两个 loader
cnpm install --save-dev style-loader css-loader
注意
这里最好是再装一遍两个 loader ,虽然之前第一节的时候已经装了一遍,但(由于我删了重装好几遍 node_modules 文件夹,导致这里没重装报错,具体原因也不甚明了)最好还是重装一遍
二、更新 webpack 的配置,让这两个 loader 生效
三、手动添加 style.css 样式表
四、导入 index.js 文件中
具体请参考webpack笔记二 管理资源之加载css、图片、字体、数据.
五、将 hello 上的样式修改为 color: blue;,可以立即看到 Hello webpack 的字体颜色随之更改,而无需完全刷新。