如何在Gulp生产构建时不压缩指定JS文件？

要解决生产模式下生成合并但未压缩的可读JS文件问题，你不需要直接将mode固定为development——这会引入开发环境的冗余代码（比如eval包裹、webpack注释）。正确的做法是在**生产模式（production）**下关闭代码压缩，并调整相关配置避免开发模式特性，同时保留合并逻辑。

调整后的js.js配置 #

import webpack from "webpack-stream";

export const js = () => {
  return app.gulp.src(app.path.src.js, { sourcemaps: app.isBuild ? false : app.isDev }) // 生产模式可按需开启sourcemap
    .pipe(app.plugins.plumber(
      app.plugins.notify.onError({
        title: "JS",
        message: "Error: <%= error.message %>"
      }))
    )
    .pipe(webpack({
      mode: app.isBuild ? 'production' : 'development',
      devtool: app.isBuild ? 'source-map' : 'eval-cheap-module-source-map', // 生产模式用source-map避免eval包裹
      optimization: {
        minimize: false, // 核心：关闭代码压缩
        minimizer: [], // 确保禁用默认的TerserPlugin
      },
      output: {
        filename: app.isBuild ? 'app.js' : 'app.min.js', // 生产模式输出无.min后缀的文件
      },
      resolve: {
        modules: ['node_modules']
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /(node_modules|bower_components)/
          }
        ]
      }
    }))
    .pipe(app.gulp.dest(app.path.build.js))
    .pipe(app.plugins.browsersync.stream());
}

关键配置说明 #

• mode: 'production' + optimization.minimize: false：保留生产模式的基础优化（如tree shaking、模块合并），但彻底关闭代码压缩，生成可读的合并代码。
• devtool: 'source-map'：生产模式下避免使用eval类的sourcemap，防止代码被eval()包裹，保证输出文件的可读性。如果不需要sourcemap，可设为'none'。
• optimization.minimizer: []：清空默认的压缩插件列表，确保webpack不会自动引入TerserPlugin进行压缩。
• 动态文件名：根据构建模式切换文件名，生产模式输出app.js，开发模式保留app.min.js（可按需调整）。

为什么之前的配置未生效？ #

你之前直接将mode设为development，webpack会自动添加开发环境的标识代码（比如webpackBootstrap注释、eval包裹），这并不是你需要的“生产模式下的未压缩合并文件”。通过production模式+关闭压缩，既能获得干净的合并代码，又能保留生产环境的必要优化。

内容的提问来源于stack exchange，提问作者Roman S.