如何配置 Webpack 以优化 Angular 应用的构建？

推荐答案

// www.javascriptcn.com code example
const path = require('path');
const { AngularCompilerPlugin } = require('@ngtools/webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js',
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: '@ngtools/webpack',
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          output: {
            comments: false,
          },
        },
      }),
      new OptimizeCSSAssetsPlugin({}),
    ],
    splitChunks: {
      chunks: 'all',
    },
  },
  plugins: [
    new AngularCompilerPlugin({
      tsConfigPath: './tsconfig.json',
      entryModule: './src/app/app.module#AppModule',
    }),
    new MiniCssExtractPlugin({
      filename: 'styles.[contenthash].css',
    }),
  ],
};

本题详细解读

1. Webpack 配置概述

• mode: 设置为 'production'，启用生产模式下的优化。
• entry: 指定应用的入口文件，通常是 main.ts。
• output: 配置输出文件的路径和文件名，使用 [contenthash] 来生成唯一的文件名，便于缓存管理。
• resolve: 配置模块解析规则，确保能够正确解析 .ts 和 .js 文件。

2. 模块规则 (Module Rules)

• TypeScript 文件处理: 使用 @ngtools/webpack 插件处理 .ts 文件，该插件是 Angular 官方提供的 Webpack 插件，用于优化 Angular 应用的构建。
• CSS 文件处理: 使用 MiniCssExtractPlugin 提取 CSS 文件，并使用 css-loader 处理 CSS 文件。

3. 优化配置 (Optimization)

• TerserPlugin: 用于压缩 JavaScript 代码，parallel: true 启用多线程压缩，terserOptions 配置输出时不保留注释。
• OptimizeCSSAssetsPlugin: 用于压缩和优化 CSS 文件。
• splitChunks: 配置代码分割策略，chunks: 'all' 表示对所有模块进行分割，优化代码的加载性能。

4. 插件配置 (Plugins)

• AngularCompilerPlugin: Angular 官方提供的 Webpack 插件，用于处理 Angular 的 AOT（Ahead-of-Time）编译，tsConfigPath 指定 TypeScript 配置文件路径，entryModule 指定应用的入口模块。
• MiniCssExtractPlugin: 用于将 CSS 提取到单独的文件中，filename 配置输出文件的名称，使用 [contenthash] 生成唯一的文件名。

通过以上配置，可以显著优化 Angular 应用的构建性能，减少打包体积，并提升应用的加载速度。