Organize + Automate + Deploy = Webpack Chapter 16This is a more general configuration and it says that whenever we encounter a file that ends
with .vue, it should be parsed and processed with the vue-loader and .js files with the
babel-loader.
To configure the Babel loader, there are a couple of options; we'll follow the recommended
way. Create a file called .babelrc inside your project folder (note the initial point) and to
specify that we want the es2015 preset applied, we write the following code:
{
"presets": ["es2015"]
}Lastly, I always like to add a new script to the package.json file to make launching
commands easier. Add the following line at the end of the file (but before the last curly
brace):
"scripts": {
"build": "webpack"
}Then run npm run build. This creates a file inside the dist directory, named bundle.js;
open it and search for a line that contains, for example, double. You should find something
like this:
var double = function double(n) {
return n * 2;
};This was our var double = n => n * 2, transformed from ES6 to regular JavaScript.
How it works...
The es2015 Babel preset is a collection of Babel plugins that aims to transform
ECMAScript2015 (ES6) syntax into simpler JavaScript. For example, it contains the babel-
plugin-transform-es2015-arrow-functions plugin, which as you may have guessed,
transforms arrow functions:
var addOne = n => n + 1