Webpack 5 配置完全指南

基础配置

// webpack.config.js
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  mode: "production"
};

Loader 配置

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: "babel-loader"
    },
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    },
    {
      test: /\.png$/,
      type: "asset/resource"
    }
  ]
}

代码分割

optimization: {
  splitChunks: {
    chunks: "all",
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: "vendors"
      }
    }
  }
}

性能优化

1. 使用缓存：cache: { type: "filesystem" }
2. 压缩代码：TerserPlugin
3. Tree Shaking：ESM 模块
4. 按需加载：动态 import()

Webpack 5 让构建更快更智能！