18.webpack4之HMR

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-server
    devServer: {
        // 要运行的项目的路径（指构建后的目录）
        // 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文件可以看到相应效果