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?

Frizzle

If src/loader.js isn't referenced anywhere in your component, it won't be bundled. Remove the CopyWebpackPlugin config, and import src/loader.js from your component file. – Osmium

Hi @sergimbo, just wondering if you we're able to solve this problem? I'm also trying to implement this. – Unwritten

I'm also looking for a solution, I encounter this issue when target is a library – Actualize

Just in case this answer is helpful to someone after this time, I found a workaround to this problem. I created a "wrapper" script where I copied manually the loader.jsfile and then executed the "vue-cli-service build ..." command. – Frizzle

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.

Dihedral

This only works when the target is App. cli.vuejs.org/guide/build-targets.html#app I'm using WebComponents target – Frizzle