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')
}
相关推荐
不想上班只想要钱14 分钟前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌32 分钟前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静1 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿1 小时前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端
533_1 小时前
[css] flex布局中的英文字母不换行问题
前端·css
浮游本尊1 小时前
React 18.x 学习计划 - 第四天:React Hooks深入
前端·学习·react.js
future_studio2 小时前
聊聊 Unity(小白专享、C# 小程序 之 日历、小闹钟)
前端·html
Yeats_Liao2 小时前
Go Web 编程快速入门 · 04 - 请求对象 Request:头、体与查询参数
前端·golang·iphone
祈祷苍天赐我java之术2 小时前
Redis 数据类型与使用场景
java·开发语言·前端·redis·分布式·spring·bootstrap
草莓熊Lotso3 小时前
C++ 方向 Web 自动化测试入门指南:从概念到 Selenium 实战
前端·c++·python·selenium