WebPack 是一个现代前端开发中广泛使用的模块打包工具（Module Bundler），主要用于将多个分散的 JavaScript 文件、CSS、图片等资源“打包”成浏览器可高效加载的静态资源文件（如 .js、.css、.png 等）。新手可以暂时通俗地理解为WebPack可以把多个文件（如js文件、css文件、图片文件等）合并成一个文件（如bundle.js），这样浏览器就只需要加载bundle.js这一个资源文件，不用分别加载js文件、css文件、图片文件等多个文件，从而实现高效加载了。

webpack.config.js文件是WebPack的配置文件，使用WebPack需要对其进行配置，下面是一个常规的基础配置和注释说明：

const path = require('path'); //引入Node.js内置的path模块，path模块专门处理文件路径，提供跨平台的路径操作方法（如拼接、解析、规范化路径），即下面配置代码中的path.resolve()方法，用于生成绝对路径，是配置输出目录时的标准做法。
const htmlWebpackPlugin = require('html-webpack-plugin'); //导入html-webpack-plugin插件，html-webpack-plugin是 Webpack 生态中一个常用的插件，它的核心作用是简化 HTML 文件的生成和管理，并自动将 Webpack 打包后的资源（如 JS、CSS）注入到 HTML 中。需要npm install html-webpack-plugin安装

module.exports = {
    mode: 'production', //指定构建模式为生产环境，不同的模式会触发不同的生产环境优化策略。可选development、production、none
    entry: './src/index.js', //入口文件，Webpack 通过入口文件找到所有依赖，确保所有需要的资源都被正确处理（如 JS 文件引用的 CSS、图片等）。可以使用数组定义多个入口文件，如entry: {home: './src/home.js', about: './src/about.js'}
    output: {
        filename: 'bundle.js', //多个资源文件打包后合并生成的最终文件
        path: path.resolve(__dirname, 'dist'), // 生成绝对路径，Webpack要求输出路径必须是绝对路径。直接使用相对路径（如'./dist'）会报错。__dirname是Node.js变量，表示当前文件所在目录的绝对路径。path.resolve(__dirname, 'dist')：将__dirname与'dist'拼接，得到完整的绝对路径（如/Users/your-project/dist）。
        publicPath: '/assets/', //用于指定项目在浏览器中运行时资源（如 JS、CSS、图片等）的公共访问路径。/assets/表示引用/assets/目录的文件
        clean: true, //Webpack 5 及以上版本新增的一个功能，用于在每次构建前自动清理输出目录（output.path）中的旧文件，确保输出目录始终保持最新状态。
    },
    module: {
        rules:[  //module.rules 是一个核心配置项，用于定义如何处理项目中的不同类型的文件。它通过一组规则（Rule）告诉 Webpack：“当遇到某个文件时，应该用哪些 Loader 去处理它？”module.rules有固定的基本结构，有需要时可以搜索查阅
            {
                test: /\.css$/i,   //处理css之类的样式
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.html$/i, //处理html之类的文件
                loader: 'html-loader',
                options: {
                    sources: {
                        list: [
                            {
                                tag: 'img',
                                attribute: 'src',
                                type: 'src'
                            }
                        ]
                    }
                }
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i, //处理多个不同后缀的图片
                type: 'asset/resource',
                generator: {
                    filename: 'assets/[name].[hash:8][ext]'
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './public/index.html', //html-webpack-plugin插件的配置，可以配置更多的插件
            minify:{
                colapseWhitespace: true,
                removeComments: true
            }
        }),
    ],
    devServer: {  //devServer 是一个用于本地开发环境的开发服务器，基于 webpack-dev-server 实现。它的核心作用是为开发者提供便捷的调试环境，支持实时重新加载（Live Reloading）、模块热替换（HMR，Hot Module Replacement）、代理请求等功能，极大提升开发效率。需要npm install webpack-dev-server先安装
        static: './dist',
        hot: true
    }
}

附：module.rules基本结构