webpack

1
const path = require('path'); // Node.js 内置模块，用于处理文件路径
2
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动生成 HTML 文件的插件
3
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 将 CSS 抽取到独立文件的插件
4
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 每次打包前清理 /dist 文件夹的插件
5

6
module.exports = (env, argv) => { // 导出 Webpack 配置函数，env 和 argv 参数用于获取环境变量和命令行参数
7
  const isProduction = argv.mode === 'production'; // 判断当前是否为生产模式
8

9
  return {
10
    entry: './src/index.js', // 入口文件，Webpack 从这里开始打包
11
    output: {
12
      filename: 'bundle.[contenthash].js', // 打包后的输出文件名，[contenthash] 用于版本控制和缓存
13
      path: path.resolve(__dirname, 'dist'), // 输出目录，使用绝对路径，将文件输出到 /dist 文件夹
14
    },
15
    mode: isProduction ? 'production' : 'development', // 根据是否为生产模式设置打包模式
16
    devtool: isProduction ? 'source-map' : 'eval-source-map', // 设置 source map，生产模式使用 source-map，开发模式使用 eval-source-map
17
    experiments: {
18
      asyncWebAssembly: true, // 启用 WebAssembly 支持，使用异步方式加载
19
    },
20
    module: { // 配置加载器，用于处理不同类型的文件
21
      rules: [
22
        {
23
          test: /\.js$/, // 使用正则匹配所有 .js 文件
24
          exclude: /node_modules/, // 排除 node_modules 文件夹中的文件，不进行处理
25
          use: 'babel-loader', // 使用 Babel 转译 ES6+ 语法到 ES5 兼容版本
26
        },
27
        {
28
          test: /\.css$/, // 匹配所有 .css 文件
29
          use: [
30
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader', // 生产模式使用 MiniCssExtractPlugin 抽取 CSS，开发模式使用 style-loader 将 CSS 注入到 HTML
31
            'css-loader', // 解析 CSS 文件，允许在 JS 文件中 import CSS
32
          ],
33
        },
34
        {
35
          test: /\.(png|jpg|gif|svg)$/, // 匹配图片文件（png, jpg, gif, svg）
36
          type: 'asset/resource', // 使用 Webpack 5 的资源模块处理图片，将图片打包为独立的文件
37
        },
38
        {
39
          test: /\.wasm$/, // 匹配 WebAssembly 文件 (.wasm)
40
          type: 'webassembly/async', // 将 WebAssembly 文件异步加载
41
        },
42
      ],
43
    },
44
    plugins: [ // 配置插件
45
      new CleanWebpackPlugin(), // 每次构建前清理 /dist 文件夹，确保输出目录干净
46
      new HtmlWebpackPlugin({
47
        template: './src/index.html', // 自动生成 HTML 文件，并将打包后的 JS/CSS 注入到 HTML 中
48
      }),
49
      new MiniCssExtractPlugin({
50
        filename: '[name].[contenthash].css', // 抽取出的 CSS 文件名，[name] 是入口名称，[contenthash] 用于缓存优化
51
      }),
52
    ],
53
    devServer: { // 开发服务器配置
54
      contentBase: path.join(__dirname, 'dist'), // 设置开发服务器的根目录为 /dist 文件夹
55
      compress: true, // 启用 gzip 压缩，提升性能
56
      port: 9000, // 开发服务器的端口号
57
      open: true, // 自动打开默认浏览器
58
      hot: true, // 启用热模块替换（HMR），修改代码后无需刷新浏览器
59
    },
60
    optimization: { // 优化选项
61
      splitChunks: {
62
        chunks: 'all', // 分离第三方库，将它们打包到单独的文件，提升缓存和加载效率
63
      },
64
    },
65
  };
66
};