webpack5零基础入门-19HMR的应用

1.定义

HMR即HotModuleReplacement

开发时,当我们修改了其中一个模块的代码webpack默认会将所有模块重新打包编译,速度很慢所以我们需要做到修改摸个模块代码,只对这个模块的代码重新打包编译,其他模块不变,这样打包的速度就能变快

HotModuleReplacement(HMR/热模块替换):在程序运行中,替换、添加或者删除模块,而无需重新加载整个页面

2.配置

在webpack.dev.js中添加配置

复制代码
/**开发服务器 */
    devServer: {
        host: 'localhost',//启动服务器域名
        port: "3000",//启动服务器端口号
        open: true,//是否自动打开浏览器
        hot: true,//开启HMR功能(只能用于开发环境,生产环境不需要)
    },

然后执行命令

npx webpack serve --config ./config/webpack.dev.js

进行开发模式的运行

此时css文件已经可以实现HMR了,修改css文件保存,整个页面不会刷新,只会更新修改的模块。

此时控制台会打印出哪个模块进行了HMR

3.实现JS文件的HMR

对于JS文件webpack不会在配置后自动进行HMR,需要手动进行配置

在打包的入口文件中即main.js文件中对需要HMR的模块进行逐个的引入

添加如下代码

复制代码
//添加JS热更新
if (module.hot) {
    console.log('支持热更新');
    //判断是否支持热更新
    module.hot.accept('./js/sum.js')
    module.hot.accept('./js/count.js')
}

然后重新运行

修改count.js模块,在查看控制台,发现count.js已经可以进行HMR了。

4.完整代码

webpack.dev.js

复制代码
const path = require('path');//nodejs用来处理路径问题的模块
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackDevServer = require('webpack-dev-server');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const loader = require('sass-loader');
function getCssLoader(pre) {
    return [MiniCssExtractPlugin.loader, 'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                plugins: [
                    'postcss-preset-env'
                ]
            }
        }
    }, pre
    ].filter(Boolean)
}
module.exports = {
    /**入口 */
    entry: './src/main.js',
    /**输出 相对路径*/
    output: {
        /**文件输出路径 绝对路径*/
        //__dirname 表示当前文件的文件夹目录
        path: undefined,//所有文件的输出目录
        /**文件名 */
        filename: 'static/js/dist.js',//入口文件输出文件名
        clean: true,//在打包前将path整个目录内容情况

    },
    /**加载器 */
    module: {
        rules: [
            //loader的配置
            {
                /**test 代表要检测的文件 */
                test: /\.css$/, //只检测.css文件
                use: getCssLoader() //对检测到文件使用哪些loader

            },
            {
                test: /\.less$/,//只检测.less文件
                //loader:'xxx',loader只能使用一个loader,use可以使用多个loader
                use: getCssLoader('less-loader'),//对检测到文件使用哪些loader
            },
            {
                test: /\.s[ac]ss$/,//只检测.sass文件
                use: getCssLoader('sass-loader'),
            },
            {
                test: /\.styl$/,//只检测.stylus文件
                use: getCssLoader('stylus-loader')
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: 'asset/resource',
                parser: {
                    dataUrlCondition: {
                        //小于10kb的图标转base64,减少请求数量
                        maxSize: 10 * 1024 // 10kb
                    }
                },
                generator: {
                    //输出图片名称
                    //[hash:10]hash值取前10位
                    filename: 'static/imgs/[hash:10][ext][query]'
                }
            },
            /**图标字体相关配置 */
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,//只对ttf、woff2资源起作用
                type: 'asset/resource',//加上/resource表示将资源原封不动的打包出来
                generator: {
                    filename: "static/media/[hash][ext][query]"
                }
            },
            {
                test: /\.js$/,
                /**排除哪些文件 */
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                // options: {
                //     presets: ['@babel/preset-env'],
                // },
            },
        ]
    },
    /**插件 */
    plugins: [
        //plugin配置
        new ESLintPlugin({
            /** 检测哪些文件 */
            context: path.resolve(__dirname, '../src')
        }),
        new HtmlWebpackPlugin({
            /**模板 */
            template: path.resolve(__dirname, '../src/public/index.html')
        }),
        new MiniCssExtractPlugin()
    ],
    /**开发服务器 */
    devServer: {
        host: 'localhost',//启动服务器域名
        port: "3000",//启动服务器端口号
        open: true,//是否自动打开浏览器
        hot: true,//开启HMR功能(只能用于开发环境,生产环境不需要)
    },
    /**模式 */
    mode: 'development',
    devtool: 'cheap-module-source-map'
}

main.js

复制代码
import sum from "./js/sum";
import count from "./js/count";
//要想webpack打包资源,必须引入该资源
import "./css/file.css"
import "./css/box.less"
import "./css/box2.scss"
import "./css/box3.styl"
import "../src/css/iconfont.css"
console.log(count(1, 2));
console.log(sum(1, 2, 3, 4, 5))
//添加JS热更新
if (module.hot) {
    console.log('支持热更新');
    //判断是否支持热更新
    module.hot.accept('./js/sum.js')
    module.hot.accept('./js/count.js')
}
相关推荐
Apifox5 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952710 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿33 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox