如何编译代码，使 JSON 与 webpack 的 main.js 分开？

Question

我有一堆 React 文件，我想将它们编译成 main.js 文件。我还有一个 JSON 文件，我的主文件用它来读取信息。现在，当我编译它时，所有内容都被编译到 main.js 中，但我希望 JSON 与它分离并且仍然能够读取它。

这就是我需要我的 JSON 的方式：

const outline = require('./outlineQuestions.json');

我已经尝试了以下方法：

• https://github.com/webpack-contrib/copy-webpack-plugin
  • 它复制了 JSON，但它仍然被捆绑到 main.js 中
• https://webpack.js.org/configuration/output/#outputfilename
  • 这里告诉我如何处理多个输出，但问题在于它只讨论 JS 文件。
• https://webpack.js.org/loaders/file-loader/
  • 这是建议的，但它在 Webpack 5 中已被弃用，而是推荐使用 Asset Modules
• https://webpack.js.org/guides/asset-modules/
  • 结果是，它没有将其捆绑到 main.js 中，但现在它在生产中不再起作用。

我想将这两个文件都提供给我的客户，以便他们可以编辑 JSON 文件，以便他们可以添加或更改信息。使用资产模块，JSON 文件没有捆绑到 main.js 中，这很好。但是现在 Main.js 无法运行，因为它无法读取 JSON。

我使用的是 Webpack 5。这个问题发生在生产中，不是在开发中。 这是我的 webpack.prod.js。

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  mode: 'production',
  output: {
    filename: 'applicationGeneratorOutputOnly.js',
    path: path.resolve(__dirname, 'build'),
    publicPath: './',
  },
  optimization: {
    minimizer: [new OptimizeCssAssetsPlugin(), new TerserPlugin()],
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: 'applicationLetter.css' }),
    new CleanWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      // {
      //   test: /\.css$/i,
      //   type: 'asset/resource',
      //   generator: {
      //     filename: '[name].css',
      //   },
      // },
      // {
      //   test: /\.json$/i,
      //   type: 'asset/resource',
      //   generator: {
      //     filename: '[name].json',
      //   },
      // },
    ],
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(
            __dirname,
            'src',
            'applicationQuestions.json'
          ),
        },
      ],
    }),
  ],
};