Webpack 5 自动导入条目块

Question

我们有一个多页面

React

应用程序，这些页面是加载单个转译入口点的 ASP.NET 页面。我们已经这样做了一段时间了，并且转译的条目的大小不断变得越来越大（可以理解）。

现在我们想要进行代码分割以避免出现 1 个大文件。我尝试了

optimization.splitChunks.chunks = 'all'

并且 webpack 按预期分割了块。我遇到的问题是我需要知道入口点依赖于哪些块（我不需要，因为块名称似乎是随机生成的）以使用

script

标签导入。我听说像

HtmlWebpackPlugin

这样的插件可以生成具有所有依赖项的 HTML 文件。但是，我们使用的 ASP.NET 页面设置为仅导入已转换的入口点文件。

我的问题是

webpack

中是否有一个设置可以使条目导入他们需要的块？或者有没有一个插件可以帮助解决这个问题？

Answer 1

已经有一段时间了，但我正在为感兴趣的人发布我们提出的解决方案。我们提出的解决方案有两个部分。

第一部分是声明条目列表。

entry: {
    file1: './PATH/TO/JSX/FILE1/file.jsx',
    file2: './PATH/TO/JSX/FILE2/file.jsx',
    // more files
}

然后aspx页面只导入转译的文件。如果您有某种约定，例如 jsx 文件将与 aspx 文件具有相同的名称，您可以使用

node glob

自动生成条目。像这样

entry: generateEntries()

然后

function generateEntries() {
    return glob.synx(
        '/**/*.aspx',
        {
            ignore: [
                '/obj/**',
                '/node_modules/**'
            ]
        }
    ).reduce((entries, file) => {
        if (check if there's a jsx file with the same name) {
            entries[file name with not extension] = path to jsx file
        }
        return entries
    }, {})
}

上面的代码是我临时想出来的，所以你需要修改它。

第二部分是使用这样的优化属性将大型常用库拆分为常用块

optimization: {
    runtimeChunk: 'single',
    splitChunks: {
        cacheGroups: [
            {
                "name": "kendo_scss",
                "chunks": "all",
                "test": "[\\\\/]js[\\\\/]react[\\\\/]css[\\\\/]kendo[\\\\/]kendo.scss"
            },
            // More of these if you have more
        ]
    }
}