CODEWITHSUNDEEP
vue.jswebpackvuejs2vue-clivue-cli-3
Assaf Moldavsky
Assaf Moldavsky

Reputation: 1721

How to bundle more than one with Vue

I have started a project with vue-cli 3, my current directory tree is:

/
  /dist
  /public
    index.html
    favicon.ico
  /src
    /assets
    /components
    /plugins

when I run vue-cli build I get all sources bundled into app.js under /dist.

My goal is to bundle another bundle, say special-app.js from a few scripts either under /public or from a special directory under /src.

I was not able to achieve this in any way using the tsconfig or trying to augment the webpack config via vueconfig.js.

How can I bundle say /src/special/a.ts and /src/special/b.ts -> /dist/special.js?

UPDATE #1

I have tried the solution proposed by @digitaldrifter

config.entryPoints.delete('app');

config
  .entry('app')
    .add(path.resolve(__dirname, './src/widget/main.ts'))
    .end()

config.entry('runner')
    .add(path.resolve(__dirname, './src/donr/donr.ts'))
    .add(path.resolve(__dirname, './src/donr/donr.scss'))
    .end();

result is that there is no runner.js or runner.html at the end

UPDATE #2

The only way I got this to build correctly was to use pages https://cli.vuejs.org/config/#pages

pages: {
  widget: {
    entry: 'src/widget/main.ts',
    template: 'public/index.html',
    filename: 'index.html'
  },
  donr: {
    entry: 'src/runner/donr.ts',
    template: 'public/donr.html',
    filename: 'donr.html'
  }
}

build wise this worked! I got:

File              Size                         Gzipped

dist/widget.js    4723.88 kb                   841.16 kb
dist/app.js       4723.88 kb                   841.16 kb
dist/donr.js      236.48 kb                    56.84 kb
dist/test.js      191.93 kb                    42.07 kb

PROBLEM when I do vue-cli serve the donr.js is served as an HTML... while when I do build donr.js under /dist is all JS with the webpack header and all that good stuff. I do not understand why and I do not understand how to see the files that dev-server is serving, it is abstracted from me.... any ideas how to solve this?

UPDATE #3 forced dev-server to dump compiled files to disk. I do not even see donr.js, while i do see it when i just build. I am slowly coming to the idea that dev-server has a bug somewhere....

Github URL with the issue: https://github.com/amoldavsky/vue-multi-bundle/tree/master

run npm serve VS npm build

any ideas?

Upvotes: 2

Views: 1395

Answers (1)

Brian Lee
Brian Lee

Reputation: 18187

You need to configure the webpack entry points.

Using chainWebpack option:

chainWebpack: config => {
    // first clear the default app entry point
    config.entryPoints
          .delete('app')

    // add a new entry with the necessary files
    config.entry('special')
          .add('/src/special/a.ts')
          .add('/src/special/b.ts')
          .end()

    // you can split the bundle by entries also
    config.entry('special-a')
          .add('/src/special/a.ts')
          .end()

    config.entry('special-b')
          .add('/src/special/b.ts')
          .end()
}

Upvotes: 1

Related Questions