webpack模块热替换(HMR)在开发环境中应用

性能优化基本介绍:
webpack性能优化分为开发环境性能优化和生产环境性能优化。

开发环境性能优化分为以下:

  • 优化打包构建速度
  • 优化代码调试

生产环境性能优化分为:

  • 优化打包构建速度
  • 优化代码运行的性能
HMR概念介绍:
模块热替换功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。主要是通过一下几种方式来加快开发速度:
  • 只更新变更内容,以节省开发时间。
  • 保留在完全重新加载页面时丢失的应用程序状态。
  • 几乎相当于在浏览器中更改样式。
HMR在开发环境中使用

webpack.config.js中代码:


/**
 * html文件:默认不能使用HMR功能,同时会导致问题:html文件不能热更新
 * 解决:修改entry入口,将html文件引入
 * 
 * css样式文件可以使用HMR功能:因为style-loader内部实现
 * 
 * js文件:默认不能使用HMR功能 需要修改js代码,添加支持HMR功能的代码
 * 注:HMR功能对js的处理,只能处理非入口js文件的其他文件。
 */



const HtmlWebpackPlugin = require('html-webpack-plugin');//默认会创建一个
var webpack = require('webpack');
const {resolve} = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports={
//修改entry入口以数组形式
    entry:['./src/js/index.js','./src/index.html'],
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            //loader的配置
            {
                //处理less资源
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                //处理css资源
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                //处理图片资源
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    limit:8*1024,
                    name:'[hash:10].[ext]',
                    //关闭es6模块化
                    esModules:false,
                }
            },
            {
                //处理html中img资源
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                //其他资源
                exclude:/\.(html|js|css|less|jpg|png|gif)/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            }
        ]
    },
    plugins:[
        //plugins的配置
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
    ],
    devServer:{
        contentBase:resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true,
        //开启HMR功能
        hot:true
    }
}

index.js中代码:


import '../css/index.less'
import '../font/iconfont.css'
import './iconfont'
import print from './print'

function add(x,y){
    return x+y;
}
console.log(1,2);

print();

//需要在入口js中添加以下代码
if(module.hot){
    //module.hot为true说明开启了HMR功能
    module.hot.accept('./print.js',function(){
        //方法会监听print.js
        print();
    })
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值