模块热替换

1.配置结构依赖. 

目录结构图

package.json中的依赖

"devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.15.0",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "core-js": "^3.16.4",
    "css-loader": "^6.2.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.24.2",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "mini-css-extract-plugin": "^2.2.0",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "postcss-loader": "^6.1.1",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^3.2.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  },

2.webpack配置文件

webpack.config.js

/*
  HMR: hot module replacement 热模块替换 / 模块热替换
    作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
      极大提升构建速度

      样式文件：可以使用HMR功能：因为style-loader内部实现了~
      js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码
        注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。
      html文件: 默认不能使用HMR功能.同时会导致问题：html文件不能热更新了~ （不用做HMR功能）
        解决：修改entry入口，将html文件引入,
        它能刷新页面,但是并不需要HMR功能,html只是一个页面,单独刷新此页即可.
        (刷新时后台并没有触发HMR)
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: ['./src/js/index.js', './src/index.html'],
  //entry:  './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
    clean: true
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // url-loader被废弃
        type: 'asset',
        /*asset/resource模式就不能使parser生效
        * asset/inline模式就是全部转换成data URI*/
        parser: {
          dataUrlCondition: {
            maxSize: 8192
          }
        },
        //输出文件重命名
        generator: {
          filename: 'imgs/[hash:10][ext]',
        },
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'media/[hash:10][ext]',
        },
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',
  devServer: {
    //static: './src',//这个会与HMR冲突,使用时删除.监听静态资源,这里滥用了.
   compress: true,
    port: 3000,
    open: true,
    hot: true,              // 开启模块热替换
  }
};

         

/*
  HMR: hot module replacement 热模块替换 / 模块热替换
    作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
      极大提升构建速度

      样式文件：可以使用HMR功能：因为style-loader内部实现了~
      js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码
        注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。
      html文件: 默认不能使用HMR功能.同时会导致问题：html文件不能热更新了~（不用做HMR功能）
        解决：修改entry入口，将html文件引入,
        它能刷新页面,但是并不需要HMR功能,html只是一个页面,单独刷新此页即可.
        (刷新时后台并没有触发HMR)
*/

       1).开启热模块替换 

                webpack.config.js中module.devServer.hot属性设置为true.

        2).css样式文件

                直接可用,因为style-loader内部实现了.

        3).js文件

                对入口文件index.js修改             

index.js

// 引入
import print from './print';
import '../css/iconfont.css';
//import '../css/index.less';
require('../css/index.less');

console.log('index.js文件被加载了111122222222221~');

print();

function add(x, y) {
  return x + y;
}

console.log(add(1, 3));

if (module.hot) {
  // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
  module.hot.accept('./print.js', function() {
    // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
    // 会执行后面的回调函数
    console.log('Accepting the updated print module!');
    print();
  });
}

入口文件要把导入的js文件监听,使用语句:

if (module.hot) {
  // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
  module.hot.accept('./print.js', function() {
    // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
    // 会执行后面的回调函数
    // 代码
  });
}

        4).html文件

                html文件: 默认不能使用HMR功能.同时会导致问题：html文件不能热更新了~（不用做HMR功能） 解决：修改entry入口，将html文件引入, 它能刷新页面,但是并不需要HMR功能,html只是一个页面,单独刷新此页即可.
        (刷新时后台并没有触发HMR)

 将webpack.config.js文件中入口改为 :

entry: ['./src/js/index.js', './src/index.html'],