What's the use of webpack in vue CLI?

Question

Ok, so I'm not being able to comprehend what value "webpack" gives in conext of Vue CLI.

I just installed vue cli globally.

then I made a directory manually and created a c1.vue file in it. With the template, script and style tags and related code.

and i compiled it using the command vue build --prod --lib c1.vue and it produced a c1.css and a c1.js file(s).

I simply add these files to my custom index.html file and use vue using a cdn and everything works !

So what's the point of webpack ?

Answer 1

and i compiled it using the command vue build --prod --lib c1.vue and it produced a c1.css and a c1.js file(s).

So, who produced these files for you? webpack and vue-loader of course :D

According to the vue-cli doc:

When the input file ends with .vue extension, we use a default app entry to load the given component, otherwise we treat it as a normal webpack entry.

https://github.com/vuejs/vue-cli/blob/master/docs/build.md

Answer 2

As Vue CLI 3 and according to this blog post, Webpack is still used, but behind scenes, as it is abstracted to each plugin and then merged in a single configuration place at runtime.

You may be relieved when you install your first Vue CLI 3 project and see there is no webpack.config.js in the project root. This is because most project configuration for Vue CLI 3 is abstracted into plugins and is merged into the base configuration at runtime.

Vue CLI abstracted the complexity of Webpack to each plugin. You can still build your own templates and invoke Webpacks plugins, but using a proper vue.config.js file.