webpack-HMR自动化更新配置

HMR 就是在devserver重配置了 hot:true (热模块更新)

问题:遇到的坑，当你有很多文件的时候，修改一个文件，所有的文件多得打包了，这样一样项目的性能就会下降，体验也不太好，
解决方案：使用热模块更新 hot:true，自动更新，哪一个文件做了修改，就更新哪一个模块，不回全局更新，这样性能就会好很多了。

注意事项

HMR：hot module replacement 热模块替换

作用：一个模块发生变化，只会打一个模块(而不是打包所有内容) 极大的提升了编译的速度

样式文件 : 可以使用HMR，因为style-loader内部实现了热更新

1， js文件 ：默认不能使用HMR功能
2，html文件 : 默认不能使用HMR功能，同时会导致问题：html文件不能热更新了
3 ， 解决方法：修改 entry 改成一个数组 ['js文件','html文件']

下面来看看怎么实现

1 webpack.config.js 文件配置 hot:true

 devServer: { //devserver 自动化配置
        contentBase: resolve(__dirname, "build"),
        compress: true, //开启压缩功能
        port: 3000,//端口号
        hot:true,//开启热更新
        open:true, //自动打开
      }

2 js人口文件 引入其他js文件代码

import pint from './pint'

// css 引入文件
import '../css/indextwo.css'

结果 不需要重新打包编译，修改只会保存文件就能直接编译了

image.png

html文件不能热更新，解决方法

  entry:['./src/js/index.js','./src/index.html']

热更新监听方法

人口js文件

// js 引入文件
import add from './add.js';
import count from './conut.js';
import pint from './pint'

// css 引入文件
import '../css/indextwo.css'


pint();

if(module.hot){
    //一旦 module.hot 为true ，说明开启了hrm 功能 -->让HMR功能代码生效
    module.hot.accept('./pint.js',function(){
        //监听方法 pint.js 文件画布，一旦发生变化，其他文件件不回打包构建
        console.log('pint.js重新打包执行了')
    })
}

修改了pint.js文件，只会执行监听方法

console.log('pint.js文件被调用了')

function pint(){
    const content="hello pint1"
    console.log(content)
}


export default pint

结果图片

image.png

webpack.con.fig文件

const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');

// HMR：hot module replacement 热模块替换 
//作用：一个模块发生变化，只会打一个模块(而不是打包所有内容) 极大的提升了编译的速度

/* 
 样式文件 : 可以使用HMR，因为style-loader内部实现了热更新
 js文件   ：默认不能使用HMR功能
 html文件 : 默认不能使用HMR功能，同时会导致问题：html文件不能热更新了
        解决方法：修改 entry 改成一个数组 ['js文件','html文件']
*/

module.exports={
    entry:'./src/js/index.js',
    output:{
        filename:'js/[name].js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:'/\.less/',
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development',
    devServer: { //devserver 自动化配置
        contentBase: resolve(__dirname, "build"),
        compress: true, //开启压缩功能
        port: 3000,//端口号
        hot:true,//开启热更新
        open:true, //自动打开
      }
}

人口js文件

// js 引入文件
import add from './add.js';
import count from './conut.js';
import pint from './pint'

// css 引入文件
import '../css/indextwo.css'


pint();

if(module.hot){
    //一旦 module.hot 为true ，说明开启了hrm 功能 -->让HMR功能代码生效
    module.hot.accept('./pint.js',function(){
        //监听方法 pint.js 文件画布，一旦发生变化，其他文件件不回打包构建
        console.log('pint.js重新打包执行了')
    })
}


console.log('add---文件方法',add(1,2))
console.log('count---文件方法',count(1,3))

//pint.js文件

console.log('pint.js文件被调用了')

function pint(){
    const content="hello pint1"
    console.log(content)
}


export default pint