webpack-如何使用单个入口点创建拆分包

Question

在将所有Webpack合并到一个入口点时，如何从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标签）是互斥的。