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

Question

我正在使用 vuejs & vue-cli 创建一个网络扩展。我已经添加了我的内容脚本，以便使用 vue-clis 内部 webpack、s.t.:

进行处理

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

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

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

没有任何反应。事实上，即使 contentScript.js 只包含 console.log('test')，它似乎也没有像我想象的那样被 webpack 处理，因为在浏览器控制台中执行脚本并没有产生任何东西。

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

/* 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 块中。因为我的 contentScript.js-脚本没有加载这个 vendor-chunk，所以 webpack 不能做它的事情。这似乎是因为 webpack 本身需要一些 ES-node_modules。如果 webpack 让我知道它缺少一个块，那将真的很有帮助，但是哦，好吧...... vue.config.js 中的必要配置是：

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

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

vuecli with webextensions: Precompile & load content script

javascript

webpack

webpack-4

vue-cli

vue-cli-4