Webpack热更新（HMR）

最新推荐文章于 2024-09-11 17:09:36 发布

Doe

最新推荐文章于 2024-09-11 17:09:36 发布

阅读量2.6k

点赞数

分类专栏： # 一些知识点文章标签： webpack

原文链接：https://www.jianshu.com/p/45c150c4aece

版权

一些知识点专栏收录该内容

48 篇文章 0 订阅

订阅专栏

1、什么是模块热替换

模块热替换（HMR - Hot Module Replacement）是 webpack 提供的最有用的功能之一。它允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面，其思路主要有以下几个方面

保留在完全重新加载页面时丢失的应用程序的状态
只更新改变的内容，以节省开发时间
调整样式更加快速，几乎等同于就在浏览器调试器中更改样式

2、启用HMR

HMR的启用十分简单，这归功于webpack内置插件使用上的便利。我们要做的仅仅是更新webpack-dev-server的配置，和使用webpack内置的HMR插件

一个带有热替换功能的webpack.config.js 文件的配置如下，做了这么几件事

引入了webpack库
使用了new webpack.HotModuleReplacementPlugin()
设置devServer选项中的hot字段为true
  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const webpack = require('webpack');

  module.exports = {
    entry: {
      app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
      hot: true
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
      new webpack.HotModuleReplacementPlugin()
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
模块的热替换相对来说比较难掌握，很容以一不小心就犯错导致失效，好在存在很多 loader，使得模块热替换的过程变得更容易。

如果想对css文件进行HMR，只把devServe中的hot设置就行了

如果想对js文件进行HMR，只把devServe中的hot设置为true是不够的，比如我想对某个文件进行HMR，还需要加这一句：

而Vue框架，在底层完成了这个步骤，只需要把devServe中的hot设置就行了，但是原生的项目，就需要自己配置了