Reactjs 从主捆绑包中隔离特定的配置文件

我的应用程序中有两个配置文件，a希望将它们放在单独的捆绑包中，或者根本不捆绑，而是复制到输出文件夹中，并以某种方式由主捆绑包读取

我已经设法将我的文件打包到一个单独的配置包中，但问题是这些文件仍然打包到主包中，实际上使我的配置包变得无用。

在@Chase的帮助下，我成功地使配置包正常工作，但我还不高兴。接下来，我想知道如何使这些文件完全不捆绑，但在部署后仍可用于主捆绑包

有什么建议吗

我的项目文件夹/文件结构（基本位）：

我的网页包配置：

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const cwd = process.cwd()
const mode = 'production'
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  context: path.join(cwd, 'app'),
  mode,

  optimization: {
    runtimeChunk: 'single',
    minimize: false,
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        config: {
          test: /[\\/]app[\\/]js[\\/]config[\\/]/,
          minSize: 0
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            // get the name. E.g. node_modules/packageName/not/this/part.js
            // or node_modules/packageName
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

            // npm package names are URL-safe, but some servers don't like @ symbols
            return `npm.${packageName.replace('@', '')}`;
          },
        }
      },
    },
  },

  entry: {
    app: ["babel-polyfill", './js/index.jsx'],
    silentRenew: ["./silent_renew/silent_renew.js"],
  },

  output: {
    path: path.resolve('dist'),
    filename: 'bundle_[name].js'
  },

  module: {
    rules: [{
      test: /\.jsx?$/,
      use: ['babel-loader'],
      exclude: /node_modules/
    },
    {
      test: /\.json$/,
      use: ['json-loader'],
      exclude: /node_modules/
    },
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    },
    {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        'less-loader'
      ]
    },
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'scss-loader'
      ]
    },
    {
      test: /\.(png|jpg|jpeg|svg|gif)$/,
      use: [
        'file-loader'
      ]
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
        'file-loader'
      ]
    },
    {
      test: /\.(pptx|zip)$/,
      loader: "file-loader",
      options: {
        name: '[name].[ext]'
      }
    }]
  },

  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './index.ejs',
      excludeChunks: ["silentRenew"],
    }),
    new HtmlWebpackPlugin({
      template: "./silent_renew/silent_renew.html",
      chunks: ["silentRenew",],
      filename: "silent_renew.html"
    }),
    new webpack.DefinePlugin({
      CONSTANTS: {
        PROD: false,
        TEST: true,
        DEV: false
      }
    }),
    new webpack.IgnorePlugin(/^(fs|ipc|ignore)$/)
  ]
}

我希望我的配置文件进入配置包，这已经在工作了。 但是我也需要它们不包含在主捆绑包中。

---

如果我能让配置文件完全不捆绑，只是复制到输出文件夹，然后由主（应用）捆绑从那里读取，那就更好了。但是独立的配置包是第二种选择。

您需要根据条件将包分块。这是一个将节点_模块拆分为“公共”捆绑包的示例，但您可以重写

test

属性以匹配目录条件

    optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "common",
          chunks: "all"
        }
      }
    }

---

copy webpack pluginI也尝试了这一点，并获得了要复制的文件，但由于配置文件被导入my components中的所有位置，它们仍然会在主捆绑包中使用/读取。因此，我复制的文件也没用。我发现了这个相关的问题：。但它没有解释主包在部署后如何读取文件。因此我设法让配置包工作，但并不理想，其中有些内容是我原始文件中没有的，由Webpack添加。因此，现在下一步是找出如何根本不捆绑这些文件，并且在部署后让它们对主捆绑包可用/可读。有什么建议吗？谢谢@Chase，我周一会试试这个。您能告诉我在哪里可以找到关于测试条件如何工作的详细信息（即语法）吗？再次感谢。嗨@chase，我已经尝试了所有我能想到的测试条件，但我就是无法让它工作。我对正则表达式不太在行，所以我不知道该改成什么。我还尝试将其设置为“绝对”路径（./App/JS/Config），但这也不起作用。您的示例似乎很有效，因为它创建了一个包，但在我更改它的那一刻，没有创建任何包。请帮助，我如何设置该测试条件以捆绑我的./App/JS/Config文件夹中的文件？请尝试/[\\/]App[\\/]JS[\\/]Config[\\\/]/Thank@chase我尝试了这个，但它没有生成“Config”捆绑包。我开始觉得这里（我的设置）还有其他问题，但是什么呢？我已经更新了我的网页配置，以改变它的当前状态。如果您能提供任何额外的帮助，我们将不胜感激！终于让它工作了。再次感谢@Chase，你的答案99%正确。我必须做两个小的调整才能使它工作。首先，我必须使正则表达式全部小写，即使我的文件夹名称以大写字母开头。其次，由于我的配置文件非常小，我必须将默认的minSize值重写为“0”。

    optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "common",
          chunks: "all"
        }
      }
    }