How to configure Webpack to bundle original 3rd party library file

Add-ons Development
#1

I’m adding VueJS in my extension but I’m afraid this will cause issues for the AMO review process as the library is internally using “Unsafe assignment to innerHTML” and “The Function constructor is eval.” (reported by “web-ext lint”.

I’m using NPM, TypeScript, Vue single file components (.vue) and Webpack so the whole build process is complex and I have hard time to achieve what I want - extract VueJS library from the result bundle so that reviewer can verify it’s the original VueJS file.

So far I managed to do this:

  1. I can configure Webpack to exclude VueJS from the result bundle:
externals: {
  vue: 'vue',
},

However then my extension won’t work because VueJS won’t be loaded. Even if would manually add the VueJS file, I would have to somehow load it when needed.

  1. I can use automatic “splitChunks” feature in Webpack, which will separate VueJS file into it’s own file called “vendor~edit_single_dial.js”.
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {   // this will move big libraries like VueJS into "vendor~xxx.js" file
        test: /[\\/]node_modules[\\/]/,

However it’s not the original VueJS file, Webpack still modifies it with its own module loading code.

Can I setup Webpack to bundle original VueJS library without modifying it?

Or is my current approach good enough for review process? The VueJS is loaded from NPM and my code doesn’t use forbidden features, it’s only the result bundle that is affected. Also my extension is minified so I’m already providing source code when submitting to AMO.