Question

我正在开发一个应用程序，该应用程序的配置文件包含许多可自定义的参数，这些参数可以在各个地方（例如静态文本，地图图层等）传递到我的应用程序中。目前，在我的Webpack流程中，这些配置文件在build流程中被捆绑在一起，并且一旦部署就不再可编辑。我希望避免像这样对配置更改进行构建。

当前，我正在使用webpack file-loader在构建过程中将我的所有资产（此时只是svg）推入它们自己的文件夹中，并且这些资产是完全可编辑的。我可以交换该文件夹中想要的任何内容，并且这些更改在构建中得到尊重。我觉得我应该可以对我的配置文件做同样的事情。按照图像功能的结构，我编写了完全相同的代码来处理我的配置。但是，当我尝试运行构建时，出现错误，无法读取将配置导入到我的React应用程序中的配置。我觉得我在处理这些配置文件方面的工作与处理图像完全相同，所以我不确定情况如何。

Webpack零件文件（其中存在可在dev / prod中使用的功能）

exports.loadImages = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [
      {
        test: /\.(png|jpg|svg)$/,
        include,
        exclude,

        use: {
          loader: 'file-loader',
          options,
        },
      },
    ],
  },
});

exports.loadConfig = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [
      {
        test: /^..*\/(config\/)..*\.js$/,
        include,
        exclude,

        use: {
          loader: 'file-loader',
          options,
        },
      },
    ],
  },
});

Webpack生产文件（在构建过程中运行的一部分）

parts.loadImages({
  include: PATHS.app, //root level
  options: {
    limit: 15000,
    name: 'assets/[name].[ext]',
  },
}),

parts.loadConfig({
  include: PATHS.app, //root level
  options: {
    limit: 15000,
    name: 'config/[name].[ext]',
  },
}),

当前，我的图像已加载到构建文件夹中，并已正确加载到应用程序中。如果我以任何方式，形状或形式对其进行修改，则更改会显示在内部版本中，因此我认为这意味着它们不会被捆绑在一起。

基于此逻辑，我将假定以相同的方式设置了loadConfig。当前，它将文件复制到构建过程中，但是当我运行构建时，出现错误提示找不到配置（更具体地说，我正在尝试使用forEach()遍历配置中的属性并Cannot read property 'forEach' of undefined）。这表明它没有被加载到构建中（不好），也没有在构建过程中被捆绑（好）。

取消捆绑特定文件（配置），以便可以在构建过程后对其进行编辑

0 个答案: