前端工具-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替换的那一部分仅仅针对此此示例，
并不能通用还是要从实际业务出发为好

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