提升打包构建速度

HotModuleReplacement

为什么

开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度慢,

所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。

是什么

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

怎么用

1. 基本配置

    module.exports = {
        /** 开发服务器 */
        devServer: {
            host: "localhost", // 启动服务器域名
            port: "6001", // 端口
            open: true, // 是否自动打开浏览器
            hot: true // 开启 HMR 功能（只能用于开发环境，生产环境不需要了）
        },
        /** 模式 */
        mode: "development",
        devtool: "cheap-module-source-map"
    }
   

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