vuecli with webextensions: прекомпилировать и загрузить скрипт содержимого

Question

Я создаю веб-расширение с vuejs & vue-cli. Я добавил свой контент-скрипт для обработки с vue-cli s внутренними webpack, st:

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

Компиляция работает. Я получаю contentScript.js файл в комплекте с веб-пакетом. Однако, когда я пытаюсь загрузить этот файл, используя:

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

, ничего не происходит. На самом деле, даже когда contentScript.js содержит только 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 -часть. Так как мой contentScript.js -скрипт не загрузил этот vendor -чанк, webpack не смог сделать свое дело. Похоже, что это так, потому что webpack сам требует некоторого ES- node_modules. Было бы очень полезно, если бы webpack дал мне знать, что в нем отсутствовал кусок, ну да ладно ... Необходимая конфигурация в vue.config.js:

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