webpack 模块热替换的理解和使用

模块热替换(webpack文档上也叫 Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。

这句话其实很全面的webpack热加载的作用，但是如果没有实际操作过的话，你可能很难理解它在实际运用上的意义。在这里用一些白话去翻译一下，以便以理解。

模块 其实就是我们写的css js以及各种资源文件，图片，音频在webpack中都可以视作模块。

热更新 在我们每次改变代码，或者资源文件的时候，整个页面其实都会刷新。而使用热更新之后，会直接替换掉，也仅仅替换更改后的依赖模块，而不用刷新整个页面，你可以简单理解成局部更新。具体实现原理在这里就不多讲，想了解的同学可以去https://www.webpackjs.com/concepts/hot-module-replacement/ 模块热替换去了解。

 

 

好了，对模块热更新有个大致的了解，接下来上代码

webpack.config.js

为了清新的表现使用了哪些插件和配置 我去掉了多余的配置字段，在实际应用中还是需要设置的

const webpack = require("webpack");//引入webpack 
module.exports = {
    devServer: {
        hot: true,//在服务中开启模块热替换
    },
    plugins: [new webpack.NamedChunksPlugin(),// 使用了webpack 内置插件 无需再次下载 NamedModulesPlugin，以便更容易查看要修补(patch)的依赖
        new webpack.HotModuleReplacementPlugin()//使用webpack的内置插件 HotModuleReplacementPlugin 模块热替换插件

    ]
}

好了重启代码，就可以直接访问了。如果上诉有什么错误的地方欢迎大神指出