1.HMR（Hot Module Replacement）热模块替换

在开发环境，可以使用热模块替换（HMR）去实现如果一个模块发生变化，只会重新打包这一个模块（而不是所有模块都进行打包），而无需重新加载整个页面。

生产环境不需要使用HMR

作用：极大提高构建速度

样式文件、js文件使用HMR功能：

样式文件：style-loader自带HMR功能

js文件：

默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码，可以在入

口文件添加如下代码，配置需要监听的js代码文件

if(module.hot) {// 一旦module.hot为true，说明开启了HMR功能。 --> 让HMR功能代码生效module.hot.accept("./print.js", function() {// 方法会监听print.js文件的变化，一旦发生变化，其他模块默认不会重新打包构建。// 会执行后面的回调函数print()})
}

html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新。但html文

件不需要使用HMR功能，因为只有一个html文件

2.相关代码段文件

1）相关代码文件

2）webpack.config.js

/*** HMR: hot module replacement 热模块替换 / 模块热替换*  作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）*      极大提升构建速度*      *      样式文件：可以使用HMR功能：因为style-loader内部实现了*          开发环境使用style-loader，HMR功能可以让性能更好，打包速度更快；*          生产环境使用mini-css-extract-plugin*      js文件：默认不能使用HMR功能 -->  需要修改js代码，添加支持HMR功能的代码*          只能处理入口js文件*      html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新了~（不用做HMR功能，因为只有一个html文件）*          解决：修改entry入口，将html文件引入*      */const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
/*** webpack.config.js webpack的配置文件* 默认只能处理js和json文件，html、css、图片、文字需要另外引入loader* 作用：指示webpack 干哪些活（当运行webpack指令时，会加载里面的配置）* 所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs** 运行项目指令:*  webpack 会将打包结果输出出去*  npx webpack-dev-server只会在内存中编译打包，没有输出*/
module.exports = {// 配置webpack入口起点entry: ["./src/js/index.js","./src/index.html"],output: {// 配置输出文件名filename: "js/built.js",// 配置输出文件路径path: resolve(__dirname,"build")},module: {rules: [// 打包样式资源// loader的配置// less{// 匹配哪些文件test: /\.less/,use: ["style-loader","css-loader",// 需要下载less和less-loader"less-loader"]},]},// plugins的配置plugins: [// html-webpack-plugin// 功能：默认会创建一个空的html，自动引入打包输出的所有资源（JS/CSS）// 需求：需要有结构的HTML文件new HtmlWebpackPlugin({// 复制一个HTML文件，并自动引入打包输出的所有资源（JS/CSS）template: "./src/index.html"})],// 配置开发服务器 devServer: 用来自动化（自动编译、自动打开浏览器、自动刷新浏览器）// 特点：只会在内存中编译打包，本地代码不会有任何输出// 运行的指令如果是webpack、会有输出。运行的指令如果是npx，则不会有输出// 启动devServer指令为：npx webpack-dev-serverdevServer: {// 要运行的项目的路径（指构建后的目录）// contentBase在webpack5中已经废弃，而使用static替代// static: resolve(__dirname,"build"),contentBase: resolve(__dirname,"build"),// 启动gzip压缩compress: true,// 开发服务器端口号port: 3000,// 自动打开浏览器open: true,// 开启HMR功能// 当修改了webpack配置，新配置想要生效，必须重启webpack服务hot: true},mode: "development"
}

3）index.js

// 引入 iconfont 样式文件
import print from "./print.js";
import '../css/index.less';console.log("index.js文件被")function add(x,y) {return x + y;
}
console.log(add(1,2));if(module.hot) {// 一旦module.hot为true，说明开启了HMR功能。 --> 让HMR功能代码生效module.hot.accept("./print.js", function() {// 方法会监听print.js文件的变化，一旦发生变化，其他模块默认不会重新打包构建。// 会执行后面的回调函数print()})
}

4）print.js

console.log("print.js")
function print() {const content = 'hello print';console.log(content);console.log("123")
}
export default print

5）index.less

#box1 {width: 100px;height: 100px;background-repeat: no-repeat;background-size: 100% 100%;background-color: pink;
}#box2 {width: 200px;height: 200px;background-repeat: no-repeat;background-size: 100% 100%;background-color: skyblue;
}#box3 {width: 300px;height: 300px;// background-image: url('../imgs/angular.jpg');background-repeat: no-repeat;background-size: 100% 100%;background-color: yellowgreen;
}#title {color: #fff;
}

执行：npx webpack-dev-server启动，修改print.js文件和css文件可以看到相应效果

18.webpack4之HMR相关推荐

webpack4.0核心概念（十）—— HMR（热模块替换-局部刷新）
HMR:当修改一个js或者css的时候,只刷新修改的内容,不进行整个页面的刷新. css的HMR--只支持开发环境不能使用mini-css-extract-plugin需要使用style-loade ...
趁webpack5还没出，先升级成webpack4吧
上一次将webpack1升级到3,也仅是半年前,前端工具发展变化太快了,如今webpack4已经灰常稳定,传说性能提升非常高,值得升级. 一直用着的webpack3越来越慢,一分多钟的编译时间简直不 ...
webpack4 module federation
module-federation是webpack5更新的一项新特性, 可以更容易的共享前端代码, 本文将介绍@module-federation/webpack-4实现原理及其与webpack5的差 ...
roadhog迁移成webpack4问题整理
[webpack-cli] Error: Cannot find module 'object.getownpropertydescriptors' 可能是webpack-cli版本的问题,我的项目是 ...
webpack4.0打包优化策略(二)
打包优化策略 webpack4.0打包优化策略(一) webpack4.0打包优化策略(二) webpack4.0打包优化策略(三) 区分开发和生产环境通常我们在开发网页时需要区分构建环境开发环境 ...
webpack4.x最详细入门讲解
前言本文主要从webpack4.x入手,会对平时常用的Webpack配置一一讲解,各个功能点都有对应的详细例子,所以本文也比较长,但如果你能动手跟着本文中的例子完整写一次,相信你会觉得Webpack ...
webpack4 入门配置研究
1. 全局安装 npm install webpack webpack-cli webpack-dev-server -g 1.1)输密文的密码(电脑开机) 1.2)安装成功 2. 输入命令mkdir ...
陈潇冰php,webpack4.x入门到进阶
课程详情(本课程所涉及内容) 1. webpack是什么?webpack的作用 2. webpack的整体构成 3. webpack-cli.package.json 4. 开发环境(developm ...
webpack4配置vue环境和一些小坑。
初始化一些文件和依赖新建一个testwebpack的文件夹. 然后在该文件夹下: npm init 1 这时候会出现一个pack.json文件. npm i webpack vue vue-loa ...

18.webpack4之HMR

1.HMR（Hot Module Replacement）热模块替换

2.相关代码段文件

18.webpack4之HMR相关推荐

最新文章

热门文章