前端工具-webpack热替换

在这里插入图片描述

开门见山
Hot Module replacement 翻译成中文是模块热替换/热更新,模块热替换/热更新概念类似于电脑中的热拔插,主要指的是运行时的变化

模块热替换/热更新指的是,应用运行过程中实时替换某个模块,而应用的运行状态不受影响,模块热替换只将修改的模块实时替换到应用中
开启HMR
HMR已经集成在HMR之中不需要安装模块,

webpack-dev-server --hot  开启热替换/ 或者是在配置文件中开启

    devServer: {
        hot: true
            // hotOnly: true // 只使用 HMR,不会 fallback 到 live reloading
    },
      plugins: [
        new HtmlWebpackPlugin({
            title: 'Webpack Tutorial',
            template: './src/index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
    
//在实际测试中CSS样式改变可以直接自动热更换,而js不能直接热更新,原因是webpack中的HMR并不是开箱即用

//webpack中的HMR需要手动处理JS模块热替换逻辑,webpack的处理

//为什么样式文件可以直接热更新,因为样式文件经过loader处理的,在style-loader已经处理过样式文件的热更新

HMR APIs
//这里实现的是js&&图片的热替换

import createEditor from './editor'

import background from './better.png'

import './global.css'

const editor = createEditor()
document.body.appendChild(editor)

const img = new Image()
img.src = background
document.body.appendChild(img)

// ============ 以下用于处理 HMR,与业务代码无关 ============

// console.log(createEditor)
//逻辑判断是否开启了热更新
if (module.hot) {
    let lastEditor = editor
    module.hot.accept('./editor', () => {
        // console.log('editor 模块更新了,需要这里手动处理热替换逻辑')
        // console.log(createEditor)

        const value = lastEditor.innerHTML

        document.body.removeChild(lastEditor)
        const newEditor = createEditor()
        newEditor.innerHTML = value
        document.body.appendChild(newEditor)
        lastEditor = newEditor
    })

    module.hot.accept('./better.png', () => {
        img.src = background
        console.log(background)
    })
}
HMR注意事项
1、处理HMR的代码报错导致自动刷新,使用hotOnly解决
	hotOnly: true
	// hotOnly: true // 只使用 HMR,不会 fallback 到 live reloading
	
2、没启用HMR的情况下,HMR报错,这种情况加一层逻辑判断即可 
//逻辑判断是否开启了热更新
if (module.hot) {//
	//HRM Code  you can do everything
}
以上就是webpack HMR的介绍,需要注意的是js替换的那一部分仅仅针对此此示例,
并不能通用还是要从实际业务出发为好

三人行必有我师焉,择其善者而从之,其不善者而改之,谢谢观看

©️2020 CSDN 皮肤主题: 撸撸猫 设计师:设计师小姐姐 返回首页