本节咱们学习 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"}

而后执行 npm run build 会将代码打包，打包后的代码会压缩成一行。执行 npm run dev 命令，会启动一个本地服务，关上 http://localhost:8090/ 网址就能够看到咱们的网页。这样当咱们批改 Less 代码时，保留后浏览器页面会自动更新。