Question

有这样的webpack配置：

module.exports = [
  {
    entry: { main: './main/app.js' },
    module: [...]
  }, {
    entry: { sub: './sub/app.js' },
    module: [...]
  }
]

并且main/app.js喜欢这样：

import('./foo'); // all files inside ./main should be handled by first config
import('../sub/bar');  // all files inside ./sub should be handled by second config

我想配置webpack，以便每个配置对象只处理该应用程序目录中的文件。这意味着即使我在sub app中包含来自main app的文件，我也希望所有加载器仅应用于从main app导入的文件并让{{1} } app文件由sub app config处理。

我查看了多个webpack问题和文档，但似乎没有解决方案。我希望也许有人能够阐明如何实现这一点。

使用include / exclude无法解决问题 - 这些只会阻止将加载器应用于给定文件，但主应用程序仍会尝试加载它们并抛出错误，即给定文件不存在加载程序。

noParse或webpackIgnorePlugin也不是一个选项，因为sub app是一个完全成熟的应用程序，它将执行其他文件导入等。而noParse会破坏这些导入。

编辑：在更高的层次上，我要做的是让一个主应用程序动态地将多个子应用程序加载到窗口中（使用动态sub）。

每个子应用都应该有自己的webpack配置，只有该配置应该负责应用正确的加载器。主应用程序应该只提供允许动态加载子应用程序的导航，而不知道他们可能需要哪些加载器。

Answer 1

默认情况下，当我们运行webpack时，它会加载webpack.config.js但是我们可以使用webpack多个配置文件来代替app结构。

webpack --config="webpack.app1.config.js"

webpack --config="webpack.app2.config.js"

我们也可以多次参赛。

entry: {
        app: [
        './src/app.js', //main javascript file
        './src/app.scss', //main scss file
        ],
        vendor:['jquery']

    },

然后在模块规则中，您可以排除某些文件夹依赖于结构。但建议为不同的应用程序结构创建seprate webpack配置文件。

如何为嵌套应用程序配置webpack多编译器？

1 个答案: