Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
Organize + Automate + Deploy = Webpack Chapter 16

This will start the compilation reading code from the dist.js file. Wait a minute, this file


doesn't exist yet. Let's create it and add the following code inside:


import Vue from 'vue'
import Shaker from './Shaker'
Vue.component('shaker', Shaker)

In the final JavaScript minified file, the Vue dependency will be taken externally, and then


we register the component globally.


As the last change, I would suggest modifying the folder in which the minified file gets
saved. In the config/index.js file, edit the following line:


assetsSubDirectory: 'static',

Swap the preceding line with the following code:


assetsSubDirectory: '.',

Now run the command to build the minified file with npm:


npm run build

You will see an output that looks like this:


To test our file, we can use JSFiddle
Free download pdf