webpack 热更新 webpack

本节我们学习 webpack 的模块热更新，也可以叫做模块热替换。其目的是为了加快用户的开发速度，提高编程体验，方便开发人员在不刷新页面的情况下，就能修改代码，并且直观地在页面上看到变化。这个功能主要用于开发过程中，对于生产环境没有任何帮助。
什么是模块热更新 HMR 全称为 Hot Module Replacement ，中文意思为模块热更新，是 webpack 提供的最有用的功能之一。它允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面。热更新中的“热”我们可以理解为这个模块正在运行中，热替换就是将正在运行的模块进行替换。
热更新主要可以通过以下几种方式来显著加快发速度：

保留在完全重新加载页面时丢失的应用程序的状态。
只更新改变的内容，以节省开发时间。
调整样式更加快速，几乎等同于就在浏览器调试器中更改样式。

启用热更新 HMR 的启动其实很简单，需要使用到 webpack-dev-server 插件和 HMR 插件。
如果要通过 webpack-dev-server 启动 webpack 的开发环境，可以打开 webpack-dev-server 的热更新开关，例如下面是在 webpack.config.js 配置文件中的演示代码：

module.exports = { devServer: { hot: true,// 打开热更新开关 } }

在 webpack.config.js 中加入 HotModuleReplacementPlugin 插件，因为这个插件是 webpack 自带的，如果可以直接加入：

module.exports = { plugins: [ webpack.HotModuleReplacementPlugin(), ] }

热更新Less代码编译在实际应用中，我们一般不会直接编写 CSS 代码，而是使用 CSS 预编译器，例如 Less、Sass、Stylus 来将写好的代码编译成 CSS 代码。我们使用 Less 来举例，在 webpack 中如果我们要使用 Less 代码编译成 CSS 代码，在打包时需要用到一个 less-loader 加载器。而要将 Less 代码正确编译成 CSS 代码则还需要用到 style-loader 和 css-loader 。
首先安装这三个加载器：

npm install style-loader css-loader less-loader --save-dev

然后修改 webpack.config.js 配置文件：

module:{ rules:[ { test:/.less$/, use:['style-loader','css-loader', 'less-loader'] } ] },

然后将一个 .less 文件导入到入口文件 index.js 中，例如：

import "./xkd.less"

最后执行 webpack 命令把 xkd.less 文件进行打包，并成功编译成了 CSS 代码。
但是这样我们会发现一个问题，每个修改完 Less 时，如果想在网页中看一下效果，就必须重新执行 webpack 打包一下，那么呀如何解决这个问题呢。这时候就可以用到热更新这个功能。使用热更新，每次修改完代码后，不需要执行 webpack 命令，界面会自动更新。
示例： webpack.config.js 配置文件的内容如下所示：

const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: { entry:'./index.js', }, output: { path:__dirname + '/dist', filename:'./bundle.js' }, module:{ rules:[ { test:/.less$/, use:['style-loader','css-loader', 'less-loader'] } ] }, mode: 'production', plugins: [ new HtmlWebpackPlugin({//html编译插件 template: './index.html' }), ], devServer:{ //配置服务端口号 port:8090, // 打开热更新开关 hot: true, //设置基本目录结构 contentBase:path.resolve(__dirname,'dist'), //服务器的IP地址，可以使用IP也可以使用localhost host:'localhost', //服务端压缩是否开启 compress:true, } }

在 package.json 中配置 npm 脚本命令：

"scripts": { "build": "webpack --config webpack.config.js", "dev": "webpack-dev-server --mode development" }

【webpack 热更新】然后执行 npm run build 会将代码打包，打包后的代码会压缩成一行。执行 npm run dev 命令，会启动一个本地服务，打开 http://localhost:8090/ 网址就可以看到我们的网页。这样当我们修改 Less 代码时，保存后浏览器页面会自动更新。