webpack 公共块中的入口点答案

【问题标题】：Entry point in a webpack common chunkwebpack 公共块中的入口点
【发布时间】：2020-11-19 15:07:24
【问题描述】：

我的 webpack 配置有一个由多个入口点使用的“通用”块。除了包含多个入口点使用的代码之外，我还希望它在加载时调用一个函数。

我尝试创建一个与块同名的“通用”入口点，但是虽然我可以在生成的输出中看到通用文件的内容，但它不会在加载时运行。

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

如果 splitChunks.name 匹配入口点名称，则入口点将被删除。

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

我的 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');

提前致谢。

【问题讨论】：

标签： javascript webpack webpack-4 chunks entry-point

【解决方案1】：

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

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

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

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

【讨论】：