CODEWITHSUNDEEP
vue.jswebpack
Adrian
Adrian

Reputation: 720

Vue.js build and deploy to single file

I have a Vue.js application which I created from webpack and when I build (npm run build), it creates a 'dist' folder with static/css and static/js folders respectively. I get

In the index.html it produces, it only seems to be using the files marked with an asterisk (*). My question is, is there a way to condense these 3 into one file so I only need to reference one file in my index page? Like ~/myApp.js? I've read about chunking but I can't seem to get less than the 3 files listed.

Upvotes: 5

Views: 7576

Answers (3)

atazmin
atazmin

Reputation: 5687

module.exports = {
  css: {
    extract: false,
  },
  configureWebpack: {
    optimization: {
      splitChunks: false
    }
  },
}

filename: vue.config.js (root folder)

Upvotes: 9

ceejayoz
ceejayoz

Reputation: 179994

You can, but you shouldn't.

The point of this separation is to reduce load times and bandwidth usage when you make updates to the application. Infrequently changing things - Vue, libraries like Bootstrap, etc. - go in the vendor file, whereas frequently changing items go in the main JS file. That way, making a minor tweak in your app only requires the user to re-download the app's files (which are usually quite small, filesize-wise) and not all the big libraries it uses.

This is likely managed by the CommonsChunkPlugin in your Webpack config.

Upvotes: -2

Jerry
Jerry

Reputation: 168

The question is : why would you wanna do this ? This is only for less codes, but if the project grows bigger, loading one file takes longer than three separated files.

Upvotes: -3

Related Questions