如何在Webpack配置中仅在生产环境启用image-webpack-loader

核心思路 #

利用Webpack自身的环境参数判断机制，仅在生产环境启用image-webpack-loader，开发环境跳过图片优化步骤，避免热更新时的额外耗时。

步骤1：配置启动脚本 #

在package.json中明确区分开发与生产环境的启动命令：

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

步骤2：修改webpack.config.js的图片处理规则 #

将配置文件改为函数形式，通过argv.mode判断当前环境，动态生成loader规则：

module.exports = (env, argv) => {
  // 判断是否为生产环境
  const isProduction = argv.mode === 'production';

  return {
    // 其他基础配置（入口、输出、devServer等）...
    module: {
      rules: [
        // 其他loader规则（CSS、JS处理等）...
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          use: [
            // 开发/生产环境通用的基础loader（file-loader或url-loader）
            'file-loader',
            // 仅生产环境启用图片优化loader
            isProduction && {
              loader: 'image-webpack-loader',
              options: {
                // 示例优化配置，可按需调整
                mozjpeg: {
                  progressive: true,
                  quality: 65
                },
                pngquant: {
                  quality: [0.65, 0.90],
                  speed: 4
                },
                webp: {
                  quality: 75
                }
              }
            }
          ].filter(Boolean) // 过滤开发环境下的undefined值，避免无效loader加载
        }
      ]
    }
  };
};

Webpack 5适配方案（使用原生Asset Modules） #

如果项目采用Webpack 5的Asset Modules替代file-loader，可按以下方式配置：

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    // 其他配置...
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'assets/images/[name][ext]'
          },
          // 仅生产环境添加图片优化loader
          use: isProduction ? [
            {
              loader: 'image-webpack-loader',
              options: { /* 你的优化配置 */ }
            }
          ] : []
        }
      ]
    }
  };
};

原理说明 #

• Webpack启动时会将mode参数传入配置函数的argv对象，以此实现环境判断
• filter(Boolean)自动移除数组中无效的false/undefined元素，确保开发环境不会加载image-webpack-loader
• 全程无需额外依赖包，完全依靠Webpack自身功能完成环境区分

内容的提问来源于stack exchange，提问作者Mahabub Hossain