如何在production模式下为分离的Webpack配置添加file.js至bundle？

云上老周

2026-5-21

在生产模式下给Webpack Bundle添加指定文件的简便方案

嘿，这个场景我经常碰到！既然你有两个分离的Webpack配置文件，想在生产环境的bundle里加入file.js，这里有几个实用又简便的方法，适配不同的项目结构：

方法1：直接修改生产环境配置的Entry入口

这是最直接的方式——找到你的生产环境Webpack配置文件（比如webpack.prod.js），在entry配置里把file.js追加到目标入口数组中即可：

// webpack.prod.js
module.exports = {
  mode: 'production',
  entry: {
    // 把file.js加入main入口的依赖数组，顺序决定打包后的加载顺序
    main: ['./src/main.js', './src/path/to/file.js']
  },
  // 其他生产环境专属配置（output、optimization等）...
};

如果你的项目是多入口结构，只需要给对应的入口数组添加file.js就行。

方法2：抽离公共配置+合并生产配置（更易维护）

如果两个配置文件有大量重复代码，建议先创建一个公共配置文件，再用webpack-merge工具合并生产配置，这样添加file.js的同时还能保持配置的整洁：

先创建公共配置文件webpack.common.js：

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

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // 公共的loader规则（比如babel、css等）
    ]
  }
};

在生产配置中合并公共配置并添加file.js：

// webpack.prod.js
const path = require('path');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

module.exports = merge(commonConfig, {
  mode: 'production',
  entry: {
    main: ['./src/main.js', path.resolve(__dirname, 'src/path/to/file.js')]
  },
  // 生产环境专属优化配置...
});