Vue Cli 3 - Include js file in dist when compile web component

Question

I’m working on a project created with Vue Cli 3 and I’ve been working with Vue web components.

I need to create a loader file (called loader.js) that will require different libraries.

require(‘.node_modules/…/…/library.js’);
require(‘.node_modules/…/…/script.js’);

I use this command to compile the web component:

vue-cli-service build --target wc --name widget ./src/components/widget.vue

What I need at this point it that when build the web component, webpack also process the loader.js file and bundle all the require inside the dist folder.

I’m new working with webpack and I don’t know how can I resolve this. I’ve tried to use the CopyWebpackPlugin but it only copied the loader.js file and does’nt include the require files.

module.exports = {
plugins: [
  new CopyWebpackPlugin(
    [
      {
        from: 'src/loader.js',
        to: '.',
      },
    ],
  ),
],
}

How can I solve this?

Answer 1

If it's a static js file, you can add it into the public folder

The public Folder

Any static assets placed in the public folder will simply be copied and not go through webpack. You need to reference them using absolute paths.

src: https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder

If it is and/or has dependencies, then using import in your main code will include it in the bundle.