javascript - 带有 webextensions 的 vuecli：预编译和加载内容脚本

Question

我正在使用vuejs&创建一个网络扩展程序vue-cli。我添加了要使用vue-clis internal webpackst 处理的内容脚本：

configureWebpack: {
    entry: {
      contentScript: "./src/contentScript/contentScript.js"
    }

编译工作。我得到了contentScript.js一个 webpack 捆绑的文件。但是，当我尝试使用以下方法加载此文件时：

chrome.tabs.executeScript({
  file: "js/contentScript.js"
});

什么都没发生。事实上，即使contentScript.js只有 contains console.log('test')，它似乎也没有像webpack我想象的那样得到处理，因为在浏览器控制台中执行脚本不会产生任何结果。

我在这里监督什么？从vue inspect我可以看到以下webpack规则js：

/* config.module.rule('js') */
      {
        test: /\.m?jsx?$/,
        exclude: [
          function () { /* omitted long function */ }
        ],
        use: [
          {
            loader: '/home/user/Coding/webext/node_modules/cache-loader/dist/cjs.js',
            options: {
              cacheDirectory: '/home/user/Coding/webext/node_modules/.cache/babel-loader',
              cacheIdentifier: '356420a0'
            }
          },
          {
            loader: '/home/user/Coding/webext/node_modules/babel-loader/lib/index.js'
          }
        ]
      },

Answer 1

我终于想通了！这是因为splitChunks 将所有node_module 资产捆绑在一个vendor-chunk 中。由于我的contentScript.js-script 没有加载这个vendor-chunk，webpack所以不能做它的事情。似乎是这样，因为webpack 它本身需要一些 ES- node_modules。如果webpack让我知道它缺少一个块，那会非常有帮助，但是哦，好吧......其中的必要配置vue.config.js是：

chainWebpack: config => {
    config.optimization.splitChunks(false);
  }