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 file will be a simple Vue component; it can be as simple as the following:

<template>

<div>

{{msg}}

</div>

</template>

<script>

export default {

name: 'app',

data () {

return {

msg: 'Hello world'

}

}

}

</script>

<style>

</style>

We need to tell Webpack how to turn .vue files into .js files. To do that, we create a

configuration file in the root folder, named webpack.config.js; this file will be

automatically picked up by Webpack. Inside this file, write as follows:

module.exports = {

module: {

rules: [

{test: /.vue$/, use: 'vue-loader'}

]

}

}

The line inside rules says the following:

Hey Webpack, when you see a file that ends in .vue, use the vue-loader to turn it into a

JavaScript file.

We need to install such a loader with npm using the following command:

npm install --save-dev vue-loader

This loader internally uses other dependencies that will not be installed automatically; we
need to do it manually by running the following command:

npm install --save-dev vue-template-compiler css-loader