浏览器扩展无法使用代码分割

Question

我有跨浏览器扩展（目前在 Chrome 和 Firefox 上运行）使用 typescript 构建并使用 webpack 编译。我想使用代码分割来减少包的大小。但是，当我在 webpack 配置中启用代码分割时，扩展不起作用。在后台脚本中有一个 browserAction 侦听器，如果没有用户，它将打开登录页面。或者如果用户已登录，则会显示弹出窗口。但是，单击浏览器操作图标不会执行任何操作。后台脚本中不会显示任何错误消息。不会显示登录窗口或弹出窗口。

这是我遇到问题的配置部分。当我注释掉这部分并且不进行代码分割时，一切都工作正常。

module.exports = {
    mode: 'development',
    entry: {
        login: path.join(__dirname, './src/js/login.ts'),
        popup: path.join(__dirname, './src/js/popup.ts'),
        options: path.join(__dirname, './src/js/options.ts'),
        background: path.join(__dirname, './src/js/background.ts'),
    },
    output: {
      path: path.join(__dirname, './dist'),
      filename: 'js/[name].js'
    },
    // When I remove this part extension is working
    optimization: {
      splitChunks: {
        name: 'vendor',
        chunks: "initial"
      }
    },
    module: {
    ...

知道为什么会发生这种情况以及如何让它发挥作用吗？在结果供应商块中，主要有扩展的几个入口点使用的node_modules依赖项（firebase、ramda等）。

谢谢你的帮助。

Answer 1

我也遇到了同样的问题，我认为这与文件有关background.js。

假设您的login条目打算在页面中使用login.html，并且login.ts被拆分为login.js和547.js（稍后包含所有条目之间的所有共享代码）。当HtmlWebpackPlugin构建 HTML 文件时，它会自动包含到<header>和login.js中547.js，因为它“知道”547.js它是login.js.

然而，background.js它是一个服务工作者，因此不包含在 HTML 页面中，因此它们的依赖项永远不会加载到任何地方，因为为此您应该有另一个插件来自动loadScript(547.js)在background.js.

最后我只是排除了background分裂：

    splitChunks: {
      chunks(chunk) {
        return chunk.name !== 'background';
      },
    },