webpack 之开发环境优化 HMR

约定不等于承诺〃 2022-10-24 05:52 189阅读 0赞

# webpack 之开发环境优化 HMR #

// webpack.config.js
    /**
     * HMR hot module replacement 热模块替换 / 模块热替换
     *  作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
     *      极大提升构建速度
     *      
     * 
     *      样式文件：可以使用 HMR 功能：因为 style-loader 内部实现了
     *      js 文件：默认不能使用 HMR 功能  --> 需要修改js代码，添加支持HMR功能的代码
     *          注意：HMR 功能对js的处理，只能处理菲入口js文件的其他文件
     *      html文件：默认不能使用 HMR 功能，同时会导致问题：html 文件不能热更新了
     *          解决：修改entry入口，将html文件引入
     */
    
    
    const {
        resolve} = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    // 代码复用loader
    const commonCssLoader = [
        // 创建 style 标签，将js中的样式资源插入进行，添加到 head 中生效
        'style-loader', 
        // 将css文件变成commonjs 模块加载js中， 里面内容是样式字符串
        'css-loader'
    ]
    
    module.exports = {
        
        // webpack 配置
        // 入口起点
        entry : ['./src/index.js', './src/index.html'],
        // 输出
        output : {
        
            // 输出文件名
            filename : 'js/built.js',
            // 输出路径
            path : resolve(__dirname, 'dist')
        },
        // loader 配置
        module : {
        
            rules : [
                {
        
                    test : /\.css$/, // 匹配哪些文件
                    //使用哪些 loader 进行处理
                    use: [ 
                        // use 数组中的 loader 执行顺序：从右到左，从下到上依次执行
                        ...commonCssLoader
                    ]
                },
                {
        
                    test : /\.less$/, 
                    use: [ 
                        ...commonCssLoader,
                        'less-loader'
                    ]
                },
                {
        
                    test : /\.html$/,
                    loader : 'html-loader'
                }
            ]
        },
        // plugins 的配置
        plugins : [
            // 详细 plugins 的配置
            // html-webpack-plugin
            // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）
            new HtmlWebpackPlugin({
        
                // 增加一个配置
                // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
                template : './src/index.html',
            }),
        ],
        //模式
        mode : 'development', // 开发模式
        // mode : 'production' // 生产模式
        devServer: {
        
            // 项目构建后的路径
            contentBase : resolve(__dirname, 'dist'),
            // 启动 gzip 压缩
            compress : true,
            // 端口号
            port : 3000,
            // 自动打开本地默认浏览器
            open : true,
            // 开启 HMR 功能
            hot: true
        }
    }

// index.js
    import print from './print.js'
    import './index.css'
    
    const add = (x, y) => x + y;
    
    console.log('add(1, 2)', add(1, 2));
    console.log('"object"', "object")
    
    if (module.hot) {
        
        // 一旦 module.hot 为 true，说明开启了 HMR 功能。 --> 让HMR 功能代码生效
        module.hot.accept('./print.js', function() {
        
            // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
            // 会执行后面的回调函数
            print()
        })
    }