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();
    })
}