webpack -如何创建带有单个入口点的拆分包

Question

如何从webpack的代码分裂中获益，同时将所有代码合并到一个入口点？假设我的切入点如下：

entry: {
    polyfills: '@babel/polyfill',
    react: ['react', 'react-dom'],
    app: resolve(appDir, 'index.js'),
},

// plus additional relevant config blocks:
...
output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js',
},
...
optimization: {
    splitChunks: {
        chunks: 'all',
    },
    runtimeChunk: 'single',
},

这将创建多个入口点，所有这些入口点都需要加载到页面中(比如BabelPoly填充、运行时、供应商块.)在主应用程序之前。

webpack怎么会被告知只需要在页面中注入一个script标签，然后懒洋洋地拉出它所需要的所有块呢？

这将便于在运行时将库注入应用程序--更容易从后端发送单个脚本位置，而不是多个脚本(并确保保持正确的顺序)。

Answer 1

我最初对webpack工作的理解是有缺陷的。

定义splitChunks.chunks: 'all' &单独的运行时和真正的单个入口点(即要包含的script标记)是相互排斥的。