【Webpack5笔记】Webpack高级配置---提升打包构建速度（HMR、Oneof、Include/Exclude、Cache和Thead）

一、HotModuleReplacement（HMR/热模块替换）

为什么要用到这个（只在开发模式）：

       开发时修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。所以当需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。

 HMR：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。

基本配置

module.exports = {
  // 其他省略
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
  },
};

 css 样式经过 style-loader 处理，已经具备 HMR 功能了。 但是 js 还不行。

JS 配置

// main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);

// 判断是否支持HMR功能
if (module.hot) {
  module.hot.accept("./js/count.js", function (count) {
    const result1 = count(2,