Question

我正在为splitChunks苦苦挣扎，而且在类似的已发布问题上似乎找不到任何合适的答案。也许我的方法不正确。

我想从核心捆绑包（ ui.js ）中删除一系列通用模块，并将它们放在单独的文件（ inline.js ）中。 / p>

webpack.config.js ：

module.exports = {
entry: {
    inline: [
        './src/utils/namespace/namespace.js',
        './src/core/pubsub/pubsub.js',
        './src/core/rum/rum.js',
    ],
    ui: './src/ui.js',
},
output: {
    filename: '[name].js',
    path: path.resolve( __dirname, 'dist/js' ),
},
optimization: {
    splitChunks: {
        cacheGroups: {
            inline: {
                name: 'inline',
                test: 'inline',
                chunks: 'all',
                enforce: true
            }
        }
    }
}
};

HTML页面：

<html>
    <head>
        <script>
            // I load the code from inline.js here
        </script>
        <script>
            // Another small inline script outside of webpack
            RUM.mark( 'js_inline_loaded' ); // RUM is not defined
        </script>
        <script src="ui.js" defer></script>
    </head>
</html>

上面的方法似乎可以正常工作，因为代码已正确地拆分到各自的文件中，但是内联代码并没有立即初始化，因为它已被推送到名为 webpackJsonp 的数组中。

这意味着使用 inline.js 中定义的 RUM ，当在包含之后直接调用它时，由于未定义而出错。

是否缺少删除webpackJsonp数组的简单选项？

我是在做愚蠢的事情还是应该采取Externals这样的其他方法？

任何帮助将不胜感激。

Answer 1

不幸的是，这并没有太多回应。在尝试理解文档并测试了所有可能的配置选项之后，我想出了一种解决方法，因此如果有人遇到类似问题，我将予以发布。请记住，这是一种解决方法，如果我找到正确的方法，我会进行更新。

我的优化配置对象现在如下所示：

optimization: {
    runtimeChunk: { name: 'inline-manifest' },
    splitChunks: {
        cacheGroups: {
            common: {
                chunks: 'all',
                name: 'inline-commons',
                test: 'inline',
                enforce: true
            }
        }
    }
}

这将生成三个文件。 inline.js ， inline-commons.js ， inline-manifest.js 。

这些都作为“内联”页面脚本的一部分包含在内：

<html>
    <head>
        <script>
            // Load inline,js, inline-commons.js & inline-manifest.js here
        </script>
        <script>
            // Another small inline script outside of webpack
            RUM.mark( 'js_inline_loaded' ); // RUM is now defined
        </script>
        <script src="ui.js" defer></script>
    </head>
</html>

inline-commons -包含 inline.js 和 ui.js

之间共享的所有代码

内联清单-包含用于初始化脚本的Webpack引导程序加载器

内联-包含 inline.js

独有的模块

就像我说的那样，这是一种解决方法，因此请谨慎行事。如果有人知道正确的方法，请随时发布更新。

使用webpack splitChunks防止重复

1 个答案: