如何使用Webpack 5生成压缩与未压缩的静态资源

在前端项目构建过程中，静态资源的体积优化是提升页面加载性能的关键环节，而同时保留未压缩版本又便于开发阶段调试代码。Webpack 5内置了多种资源处理能力和优化插件，我们可以通过合理的配置，在一次构建流程中同时生成压缩和未压缩的静态资源，也可以针对不同环境分别输出对应格式的资源。

核心概念与工具说明

要实现压缩和未压缩静态资源的生成，首先需要了解Webpack 5中相关的核心工具：

• TerserPlugin：Webpack 5内置的JavaScript代码压缩插件，默认在生产模式下会自动启用，负责移除代码中的冗余内容、缩短变量名，减小JS文件体积。
• Asset Module：Webpack 5新增的资源模块类型，用于替代旧版本的url-loader、file-loader等，可处理图片、字体、样式等静态资源，支持设置资源的输出格式和压缩规则。
• mode配置：Webpack的mode分为development和production两种，不同模式下会默认启用不同的优化策略，我们可以通过mode区分压缩和未压缩资源的输出场景。

方案一：不同环境分别输出对应资源

这种方式适合大多数常规项目，开发环境输出未压缩资源方便调试，生产环境输出压缩资源用于上线。我们可以通过设置不同的mode和对应的插件配置来实现。

基础配置文件示例

首先创建通用的基础配置，处理资源的基本解析规则：

// webpack.base.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',
    clean: true // 每次构建前清空dist目录
  },
  module: {
    rules: [
      // 处理CSS资源
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 处理图片资源，使用Asset Module
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 小于8KB的图片转base64
          }
        },
        generator: {
          filename: 'images/[name][hash:8][ext]'
        }
      }
    ]
  }
};

开发环境配置（未压缩资源）

开发环境设置mode为development，关闭代码压缩，同时保留完整的source map方便调试：

// webpack.dev.js
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'eval-source-map', // 生成完整的source map
  optimization: {
    minimize: false // 关闭代码压缩
  },
  output: {
    filename: 'js/[name].uncompressed.js' // 未压缩文件加标识
  }
});

生产环境配置（压缩资源）

生产环境设置mode为production，默认会启用TerserPlugin压缩JS代码，还可以额外配置CSS压缩等优化：

// webpack.prod.js
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = merge(baseConfig, {
  mode: 'production',
  devtool: false, // 生产环境不需要source map
  optimization: {
    minimize: true, // 启用代码压缩
    minimizer: [
      // JS压缩使用默认的TerserPlugin，可自定义配置
      new (require('terser-webpack-plugin'))({
        terserOptions: {
          compress: {
            drop_console: true // 移除console语句
          }
        }
      }),
      // CSS压缩
      new CssMinimizerPlugin()
    ]
  },
  output: {
    filename: 'js/[name].compressed.js' // 压缩文件加标识
  }
});

方案二：一次构建同时输出两种资源

如果需要在一次构建流程中同时生成压缩和未压缩的静态资源，可以通过配置多个entry和对应的output规则，或者使用插件动态生成不同版本的资源。以下是基于多entry的实现方式：

// webpack.config.js
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: {
    'app.uncompressed': './src/index.js',
    'app.compressed': './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',
    clean: true
  },
  mode: 'none', // 关闭默认的模式优化，手动控制压缩
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024
          }
        },
        generator: {
          filename: 'images/[name][hash:8][ext]'
        }
      }
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        // 只对压缩版本的entry生效
        include: /app\.compressed/,
        terserOptions: {
          compress: {
            drop_console: true
          }
        }
      })
    ]
  }
};

上述配置中，我们定义了两个入口，分别对应未压缩和压缩版本，通过TerserPlugin的include配置指定只对压缩版本的入口进行代码压缩，未压缩版本会保留完整的代码结构。

资源类型适配说明

除了JS资源，其他静态资源的压缩也需要对应配置：

• CSS资源：使用CssMinimizerPlugin进行压缩，生产环境配置中启用即可。
• 图片资源：可以通过image-webpack-loader配合Asset Module实现图片压缩，配置示例如下：

// 图片压缩规则配置
{
  test: /\.(png|jpe?g|gif|svg)$/,
  type: 'asset',
  use: [
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: { progressive: true, quality: 80 },
        optipng: { enabled: true },
        pngquant: { quality: [0.6, 0.8] },
        gifsicle: { interlaced: false }
      }
    }
  ],
  parser: {
    dataUrlCondition: {
      maxSize: 8 * 1024
    }
  },
  generator: {
    filename: 'images/[name][hash:8][ext]'
  }
}

需要注意的是，image-webpack-loader会增加构建时间，建议只在生产环境配置中使用。

构建命令配置

在package.json中配置对应的构建命令，方便快速执行不同场景的构建：

{
  "scripts": {
    "dev": "webpack serve --config webpack.dev.js",
    "build:prod": "webpack --config webpack.prod.js",
    "build:all": "webpack --config webpack.config.js"
  }
}

执行npm run dev会启动开发服务器并输出未压缩资源，执行npm run build:prod会输出生产环境的压缩资源，执行npm run build:all会一次构建同时输出压缩和未压缩两种资源。

Webpack_5静态资源压缩webpack配置terser_pluginasset_module修改时间：2026-06-03 02:43:46