Webpack5使用webpack-stream生产模式打包生成空bundle.js问题求助

问题排查与解决方案 #

核心问题出在构建任务逻辑和文件复制规则的冲突，具体修复步骤如下：

• 补全构建任务的js打包流程
  你定义的build、build_dev构建任务中没有引入scripts打包逻辑，dist目录下的bundle.js实际是copy任务直接从src目录复制的原始空文件，并非webpack打包产物。
  修改构建任务配置：

export const build = gulp.series(clean, gulp.parallel(styles, images, scripts, copy));
export const build_dev = gulp.series(
  clean,
  gulp.parallel(styles, images, scripts, copy),
  watch
);

同时在watch任务中添加js文件监听，实现修改自动重打包：

export const watch = () => {
  gulp.watch('src/assets/scss/**/*.scss', styles);
  gulp.watch(path.images.src, images);
  gulp.watch('src/assets/js/**/*.js', scripts);
  gulp.watch(path.others.src, copy);
};

• 调整copy任务的文件匹配规则
  当前copy任务的匹配规则包含了js、scss、图片目录的文件，会覆盖其他任务生成的打包产物，需要排除已单独处理的资源路径：

const path = {
  // 其他配置保持不变
  others: {
    src: [
      'src/assets/**/*',
      '!src/assets/{js,scss,images}/**/*',
    ],
    dest: 'dist/assets/',
  },
};

• 优化webpack配置适配webpack-stream
  webpack-stream会处理文件流输出，webpack配置中重复声明output.path会导致路径冲突，同时可以把mode和项目的PRODUCTION变量联动，无需手动切换：

const webpackConfig = {
  entry: {
    main: filepath.resolve(__dirname, './src/assets/js/bundle.js'),
  },
  output: {
    filename: 'bundle.js',
  },
  mode: PRODUCTION ? "production" : "development",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          },
        },
      }
    ]
  }
}

如果调整后仍存在空文件问题，检查入口文件src/assets/js/bundle.js的代码逻辑：webpack5生产模式默认开启tree shaking，若代码只有变量声明无执行逻辑、也无外部引用的导出内容，会被判定为无用代码直接移除，可在package.json中添加"sideEffects": ["*.js"]关闭对js文件的tree shaking校验，或者确认入口代码有可执行逻辑。

内容的提问来源于stack exchange，提问作者David Essien