webpack基本配置

以下是一个基础的 Webpack 5 示例配置，包含常见配置项和详细注释：

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // 开发模式（开发时建议用 development，生产用 production）
  mode: 'development',

  // 入口文件配置
  entry: {
    main: './src/index.js',
    // 可以添加更多入口点用于代码分割
  },

  // 输出配置
  output: {
    filename: '[name].[contenthash].js', // 使用内容哈希实现缓存优化
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/', 
    assetModuleFilename: 'assets/[hash][ext][query]' // 静态资源输出路径
  },

  // 开发服务器配置
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
    hot: true, // 开启热模块替换（HMR）
  },

  // 模块处理规则
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader', // 将 CSS 插入到 DOM
          'css-loader'    // 解析 CSS 文件
        ]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource' // Webpack 5 内置的静态资源处理
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource'
      }
    ]
  },

  // 插件配置
  plugins: [
    new CleanWebpackPlugin(), // 每次构建前清理 dist 目录
    new HtmlWebpackPlugin({
      title: 'Webpack Demo',
      template: './src/index.html' // 自定义 HTML 模板
    })
  ],

  // 优化配置
  optimization: {
    splitChunks: {
      chunks: 'all', // 自动分割第三方库和公共模块
    },
  },

  // 解析配置
  resolve: {
    extensions: ['.js', '.json'], // 自动解析这些扩展名
    alias: {
      '@': path.resolve(__dirname, 'src') // 创建路径别名
    }
  },

  // 生产环境配置（可以通过环境变量区分）
  ...(process.env.NODE_ENV === 'production' ? {
    devtool: 'source-map',
    performance: {
      hints: 'warning',
      maxAssetSize: 500000, // 500KB
      maxEntrypointSize: 500000
    }
  } : {
    devtool: 'eval-cheap-module-source-map' // 开发环境 source map
  })
};

需要安装的依赖（可通过 npm/yarn/pnpm 安装）：

npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-env
npm install --save-dev css-loader style-loader
npm install --save-dev html-webpack-plugin clean-webpack-plugin

项目结构建议：

project/
├── src/
│   ├── index.js       # 项目入口文件
│   └── index.html     # HTML 模板
├── public/            # 静态资源目录（可选）
├── .babelrc           # Babel 配置文件
└── webpack.config.js  # Webpack 配置文件

.babelrc 示例：

{
  "presets": ["@babel/preset-env"]
}

常用脚本配置（package.json）：

{
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production",
    "build:analyze": "webpack --mode production --profile --json > stats.json && webpack-bundle-analyzer stats.json"
  }
}

额外说明：

1. 可根据需要添加对 TypeScript、Sass、React 等的支持
2. 生产环境建议添加 mini-css-extract-plugin 分离 CSS
3. 可以通过不同配置文件区分开发和生产环境（如 webpack.dev.js、webpack.prod.js）
4. 推荐使用 webpack-merge 来合并通用配置和环境特定配置

这是一个现代 Web 应用的基础配置，可根据具体项目需求进行调整和扩展。