Bundling your component with Webpack

Webpack lets you package your project in minified JavaScript files. You can then distribute these files or use them yourself. When you use the inbuilt templates that come with vue-cli, Webpack is configured to build an entire working application with it. Sometimes we want to build a library to publish or use in another project. In this recipe, you will tweak the default configuration of the Webpack template to release a component instead.

Getting ready

This recipe will make sense to you only after you have installed npm (refer to the Choosing a development environment recipe in Chapter 1, Getting Started with Vue.js) and got familiar with vue-cli and the Webpack template.

 

How to do it...

For this recipe, you will build a reusable component that shakes whatever you put into it; for this, we will use the excellent CSShake library.

Create a new clean project based on the Webpack template. You can take a look at the previous recipe to see how to do that, or you...