【Webpack基础】JS里的热更新

1. JS里的热更新

1.1 问题：一个模块修改了以后，会刷新整个页面，另外一个模块的状态会消失

每次修改一个模块，整个页面就会刷新，通过右下角network可以证明，它重新下载了一个新的页面

此时就需要通过热更新解决这个问题

1.2 JS热更新的实现方式

counter.js

function counter() {
    const div = document.createElement('div');
    div.setAttribute('id', 'counter');
    div.innerText = 1;
    document.body.appendChild(div);
    div.addEventListener('click', () => {
        div.innerText = +div.innerText + 1;
    })
}

export default counter;

number.js

function number() {
    const div = document.createElement('div');
    div.setAttribute('id', 'number');
    div.innerText = 78;
    document.body.appendChild(div);
}

export default number;

webpack.config.js

const path = require('path');

const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: "development",
    entry: './src/index.js',
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        open: true,
        hot: true, // 第一步： 将 devServer 的 hot 设置为 true，并实例化 webpack.HotModuleReplacementPlugin
        proxy: {
            '/my': {
                target: 'https://api-hmugo-web.itheima.net',
                secure: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/my': ''
                }
            }
        }
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                "style-loader",
                "css-loader",
                "postcss-loader",
            ],
        }],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
}

index.js

import counter from './counter';
import number from "./number";
counter();
number();

/*
*  第二步：通过 module.hot 判断 是否开启 热更新
*         通过 module.hot.accept 监听 要热更新的 页面
*/ 

if (module.hot) {
    module.hot.accept('./number.js', () => {
        const div = document.getElementById('number');
        document.body.removeChild(div);
        number();
    })
}

修改样式不用写这一段代码也可以实现热更新，是因为 style-loader 里面本身有这段代码

只要想实现热更新就少不了这段代码，vue -> vue-loader，react -> babel-preset

提示：只能热更新被监听的页面，没有被监听的页面还是会刷新页面