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

Organize + Automate + Deploy = Webpack Chapter 16

This should generate an output similar to this:

You can now open index.html and you'll see the component working.

However, it's not so much fun to launch this long command every time. Webpack and npm

can do better.

In webpack.config.js, add the following properties:

module.exports = {

entry: './app/index.js',

output: {

filename: 'bundle.js',

path: __dirname + '/dist'

},

module: {

...

This will specify the entry point of Webpack and where the resulting file should be saved.

We can also add a script to package.json:

"scripts": {

"build": "webpack"

}

Now, launching npm run build will have the same effect as the long command we used.