续 webpack5的热更新

什么是热更新?

不知道大家以前开发是否遇到下面的问题?

	每次在网页设置好样式之后都要手动的去刷新页面,我们添加的样式才会显示在页面上.

热更新就是 :
当我们把样式保存好之后,切换到我们的页面,不需要刷新它就已展示出我们设置好的样式了,这样就方便,又提升了我们的工作效率.
换言之
热更新就是帮我们自动的刷新了浏览器.让我们省去区了刷新浏览器动作.
热更新：新代码生效，网页不刷新，状态不丢失

什么是模块热替换

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

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

webpack中热更新配置

通过webpack运行一个项目

• 创建一个叫webpackHot的一个项目

mkdir webpackHot

切换到webpackHot项目内

cd webpackHot

• 在项目内初始化包管理

npm init

• 下载webpack依赖
• npm install webpack webpack-cli

启动服务器

启动服务器之前我们必须先安装安装它

npm install webpack-dev-server --save-dev

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

设置HTML热更新

我们需要下载

npm install --save-dev html-webpack-plugin

HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。
注意:
没它咱们实现不了HTML的热更新,
特别注意: 这个对象内有很多属性,特别要记住这个咱们热更新全靠它了

这下面都是写基本配置

var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  //...
  mode: 'production',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    hot:true  // 开启热更新
  },
  plugins: [new HtmlWebpackPlugin({
    template:'./index.html'
  })],
};

设置CSS热更新

借助于 style-loader，使用模块热替换来加载 CSS 实际上极其简单。此 loader 在幕后使用了 module.hot.accept，在 CSS 依赖模块更新之后，会将其 patch(修补) 到

• 需要咱们安装以下俩个loader
• `你需要安装 style-loader 和 css-loader，并在 module 配置 中添加这些 loader：
• npm install --save-dev style-loader css-loader

配置

配置如下来实现css热更新

var path = require('path');
module.exports = {
  //...
  mode: 'production',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    hot:true
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

js代码的热更新

我们只需要在index.js 入口文

  if (module.hot) {
    module.hot.accept('./print.js', function() {
      console.log('Accepting the updated printMe module!');
     printMe();
     document.body.removeChild(element);
     element = component(); // 重新渲染 "component"，以便更新 click 事件处理函数
     document.body.appendChild(element);
    })
  }

这是我的package.json 大家可以下载下来自己多多练习

npm install 

{
  "name": "webtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2"
  },
  "devDependencies": {
    "css-loader": "^5.2.6",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^2.0.0",
    "webpack-dev-server": "^3.11.2"
  }
}

总结 :

webpack是一款模块加载兼打包工具，它可以将js、jsx、coffee、样式sass、less，图片等作为模块来使用和处理。

热更新更是替减少了刷新的频率,让我们可以更专注于书写代码,成我一个优秀的程序猿.

为什么用选择webpack？

在我看来，选择webpack应该是有几点明显优点：

（1）. 可以将各种静态资源视作模块加载，不像RequireJS只能加载js。

（2）. 可以很好的拆分成按需加载的块，加载模块方式非常舒适，不需回调。

（3）. 扩展性强，插件机制完善。

最重要: 它还有热更新.