1. Configuration structure dependency  

Directory structure diagram

 

package. Dependencies in 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 configuration file

webpack.config.js

/*
  HMR: hot module replacement Hot module replacement / module hot replacement
    Function: when a module changes, only one module will be repackaged (instead of all modules)
      Greatly improve the construction speed

      Style file: HMR function can be used because style loader is implemented internally~
      js File: HMR function cannot be used by default -- > js code needs to be modified to add code supporting HMR function
        Note: the HMR function can only handle other files that are not imported js files.
      html File: HMR function cannot be used by default At the same time, it will cause problems: html files cannot be hot updated ~ (no HMR function)
        Solution: modify the entry entry and import the html file,
        It can refresh the page, but it does not need HMR function. html is just a page. You can refresh this page alone
        (HMR is not triggered in the background during refresh
*/

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: [
      // Configuration of loader
      {
        // Handling less resources
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // Handling css resources
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // Processing picture resources
        test: /\.(jpg|png|gif)$/,
        // URL loader is obsolete
        type: 'asset',
        /*asset/resource Mode cannot make the parser effective
        * asset/inline The schema is all converted to a data URI*/
        parser: {
          dataUrlCondition: {
            maxSize: 8192
          }
        },
        //Output file rename
        generator: {
          filename: 'imgs/[hash:10][ext]',
        },
      },
      {
        // Processing img resources in html
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // Processing other resources
        exclude: /\.(html|js|css|less|jpg|png|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'media/[hash:10][ext]',
        },
      }
    ]
  },
  plugins: [
    // plugins configuration
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',
  devServer: {
    //static: './src ', / / this will conflict with HMR and will be deleted when used Listening to static resources is abused here
   compress: true,
    port: 3000,
    open: true,
    hot: true,              // Open module hot replacement
  }
};

         

/*
  HMR: hot module replacement
    Function: when a module changes, only one module will be repackaged (instead of all modules)
      Greatly improve the construction speed

      Style file: HMR function can be used because style loader is implemented internally~
      js file: HMR function cannot be used by default -- > js code needs to be modified to add code supporting HMR function
        Note: the HMR function can only handle other files that are not imported js files.
      html file: HMR function cannot be used by default At the same time, it will cause problems: html files cannot be hot updated ~ (no HMR function)
        Solution: modify the entry entry and import the html file,
        It can refresh the page, but it does not need HMR function. html is just a page. You can refresh this page alone
 (HMR is not triggered in the background during refresh)
*/

       1). Turn on hot module replacement

                webpack. config. Module. JS devServer. Set the hot property to true

        2).css style file

It is directly available because style loader is implemented internally

        3).js file

For the entry file index JS modification

index.js

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

console.log('index.js The file was loaded 111122222221~');

print();

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

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

if (module.hot) {
  // Once module If hot is true, HMR function is enabled. -- > Validate HMR function code
  module.hot.accept('./print.js', function() {
    // Method listens for print JS file changes. Once changes occur, other modules will not be repackaged and built.
    // The following callback function will be executed
    console.log('Accepting the updated print module!');
    print();
  });
}

To listen for the imported js file in the entry file, use the following statement:

if (module.hot) {
  //Once module If hot is true, HMR function is enabled. -- > Validate HMR function code
  module.hot.accept('./print.js', function() {
    //Method listens for print JS file changes. Once changes occur, other modules will not be repackaged and built.
    //The following callback function will be executed
  });
}

        4).html file

html file: HMR function cannot be used by default At the same time, it will cause problems: the html file cannot be hot updated ~ (no HMR function) solution: modify the entry and import the html file. It can refresh the page, but it does not need the HMR function. html is just a page. Refresh this page separately
(HMR is not triggered in the background during refresh)

The webpack config. The entry in JS file is changed to:

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