vuecli with webextensions: Precompile & load content script

Question

I am creating a web-extension with vuejs & vue-cli. I have added my content script to be processed with vue-clis internal webpack, s.t.:

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

Compilation works. I am getting out a contentScript.js, a webpack-bundled file. However, when I try to load this file using:

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

nothing happens. In fact, even when the contentScript.js only contains console.log('test'), it doesn't seem to get processed by webpack in the way I imagine, since executing the script in the browser console doesn't yield anything.

What am I overseeing here? From vue inspect I can see the following webpack-rule for 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

I finally figured it out! It's because of splitChunks bundling all node_module assets in a vendor-chunk. Since my contentScript.js-script didn't load this vendor-chunk, webpack couldn't do its thing. That seems to be the case because webpack itself requires some ES-node_modules. Would've been really helpful if webpack had let me know that it was missing a chunk, but oh well...The necessary configuration in the vue.config.js is:

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