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 component doesn't do much except print the [2,4,6] array to the console, but it does

it with arrow syntax at the following line:

var double = n => n * 2

This is not understood by some browsers and tools; we need to compile this component
with Webpack, but we need to do it with the Babel loader.

Create a new webpack.config.js file and write the following inside it:

module.exports = {

entry: 'babel-loader!vue-loader!./myComp.vue',

output: {

filename: 'bundle.js',

path: 'dist'

}

}

This will tell Webpack to start compiling from our myComp.vue file, but before that, it will

be processed by the vue-loader to turn it into a js file and then by the babel-loader to

turn the arrow function into something simpler and more compatible.

We can achieve the same thing with a different and more standard configuration:

module.exports = {

entry: './myComp.vue',

output: {

filename: 'bundle.js'

},

module: {

rules: [

{

test: /.vue$/,

use: 'vue-loader'

},

{

test: /.js$/,

use: 'babel-loader'

}

]

}

}