javascript - 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',
},

这将创建多个入口点，所有入口点都需要在主应用程序本身之前加载到页面中（如 babel polyfills、运行时、供应商块......）。

如何指示 webpack 以便只需要将单个script标签注入页面，然后懒惰地拉出它需要的所有块？

这将简化在运行时将库注入应用程序 - 更容易从后端仅发送单个脚本位置，而不是多个（并确保保留正确的顺序）。

Answer 1

猜猜我对 webpack 工作原理的初步理解是有缺陷的。

定义splitChunks.chunks: 'all'和分离运行时和拥有一个真正单一的入口点（即script要包含的标签）是相互排斥的。