javascript - webpack 公共(public) block 中的入口点

Question

我的 webpack 配置有一个被多个入口点使用的“公共(public)” block 。除了包含多个入口点使用的代码外，我还希望它在加载时调用一个函数。

我尝试创建一个与 block 同名的“公共(public)”入口点，但尽管我可以在生成的输出中看到公共(public)文件的内容，但它不会在加载时运行。

我认为这是由于以下原因，来自 Webpack 的 splitChunksPlugin documentation :

If the splitChunks.name matches an entry point name, the entry point will be removed.

有没有办法解决这个问题，让“通用” block 在加载时运行某些东西？

我的 webpack 配置的 entry 是:

entry: {
    common: './src/entryPoints/common.tsx',
    entry1 './src/entryPoints/entry1.tsx',
    entry2: './src/entryPoints/entry2.tsx'
}

及其optimisation.splitChunks是:

splitChunks: {
    cacheGroups: {
        common: {
            name: 'common',
            chunks: 'all',
            minChunks: 2,
            priority: 1,
            enforce: true
        },
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all',
            priority: 3,
        }
    }
}

出于测试目的，common.tsx 仅包含:

import '../misc/polyfills';

console.log('COMMON ENTRY POINT');

提前致谢。

Answer 1

在没有更好的解决方案的情况下，我目前通过修改入口对象来“解决”这个问题，如下所示:

entry: {
    entry1: [
        './src/entryPoints/common.tsx',
        './src/entryPoints/entry1.tsx'
    ]
    entry2: [
        './src/entryPoints/common.tsx',
        './src/entryPoints/entry2.tsx'
    ]
}

在显示的示例中，这会导致记录的消息显示在加载任何入口点的页面上。根据需要，消息本身包含在公共(public) block 中。

但是，如果在一个页面上加载了多个入口点，它会显示两次，这意味着真正的代码需要检查它是否已经运行。这不太理想，但如有必要会这样做。