Organize + Automate + Deploy = Webpack Chapter 16How it works...
In this recipe, we basically created a JavaScript file (bundle.js) that simultaneously
contains Vue and the component we wrote. In the index.html, there is no trace of Vue
because it's embedded in bundle.js.
This way of working is much better when we have a lot of dependencies. We don't need to
add a lot of tags in the head or the body of the page anymore. Also, we don't have to be
afraid to load a dependency that we don't need.
As an added bonus, Webpack has the power and flexibility to minify our final file and other
advanced optimizations that are simply not possible by loading the dependencies
manually.
Using external components in your Webpack project
Using external Vue components in your own project is usually straightforward. Sometimes
though, things aren't so simple. In particular, there are some configurations in the official
templates with Webpack that (weirdly) actually prevent you from using some external
components. In this recipe, we will install a modal dialog component from the Bulma
project.
Getting ready
In this recipe, we will tweak the Webpack configuration. It is suggested to have completed
the Organizing your dependencies with Webpack recipe before taking up this task.
How to do it...
We will start with a fresh Webpack project. You can create a new one using the vue-cli
and the official Webpack template. My suggestion, however, is, to begin with my Webpack
template, which is a clean slate. To do it, run the following command in a new directory:
vue init gurghet/webpack