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 它是一个 service worker，因此不包含在 HTML 页面中，因此它们的依赖项永远不会加载到任何地方，因为为此您应该有另一个插件来自动添加行 {{1 }} 在 loadScript(547.js) 的开头。

最后，我只是排除了要拆分的 background.js：

background

浏览器扩展程序无法与代码拆分一起使用

1 个答案: