Single file build .js

[nachiomdq]

Hi!

I was wondering if exists the chance to make a build without put the unpkg/vue in the html head. For example, all js and css in app.js.

Right now i need to import two files, but i prefer to import just one (app.js). This is possible?

Thanks!

[karol-f]

Your use case is possible if You configure it in Webpack (via vue-cli's vue.config.js) and set appropriate loaders for CSS.

If You use developement mode, for CSS files only style-loader is used. It insert styles to DOM - like You want.

It's not performant and not advisable for production. So in production mode css-loader is additionally used - it extract styles to separate CSS file during build time.

While it's possible to reconfigure it in Webpack configuration, it's not advisable - styles will have to be applied by JS so there will be redraw of the page, slower loading etc.

https://webpack.js.org/loaders/style-loader/
https://webpack.js.org/loaders/css-loader/

[BennyAlex]

@karol-f
And how to avoid the need for unpkg/vue in the html head?
If the user of my web component doens't use vue and only wants to use my component, it would be much better to include vue directly in the output file (better even with tree shaking, so the build will even be smaller when removing unused vue functions, which isnt possible with global vue script at all)

[BennyAlex]

I used your vue-custom-element before and there vue was already included in the output.
So any chance to do this with vue-web-component-wrapper?

[LintonAchmad]

This will be a win.