Vue-webpack, Babel

First, Webpack

Here I just do a webpack to explain, webpack This tool is very powerful, solves our front-end very cumbersome some of the tool process tedious things. If you are interested in the students, suggest or crossing Internet cafes.

Chinese link Address: https://www.webpackjs.com/

Why use Webpack?

Many of today's web pages can actually be seen as feature-rich applications that have complex JavaScript code and a whole bunch of dependent packages. In order to simplify the complexity of development, the front-end community has emerged a lot of good practical methods

• modularity allows us to refine complex programs into small files;
• Similar to Typescript's development language based on javascript: It enables us to implement features that are not directly used by the current version of JavaScript, and can then be converted to JavaScript files to make the browser recognizable;
• CSS preprocessor such as scss,less
• ...

These improvements do greatly improve our development efficiency, but the files that are developed with them often require additional processing for the browser to recognize, and manual processing is cumbersome, which provides the need for the Webpack class of tools to emerge.

What is Webpack

Webpack can be seen as a module Packer : What it does is analyze your project structure, find JavaScript modules, and other language extensions (Scss,typescript, etc.) that can't be run directly by browsers. It is converted and packaged into the appropriate format for use by the browser.

A picture of the official website, can you see it?

The middle one is the webpack icon, which can be seen as the Webpack tool. The left side is our project in the production environment since the package, through this webpack tool we can package all the pictures, so the script, all the style and so on, and finally packaged into the right static resource file.

Note: Each Webpack version has different features, and the high version of Webpack may have unexpected bugs, it is recommended that you use the 2 version of Webpack.

In addition, Webpack supports our modular loading. In the previous study can not this function Oh! This allows us to develop more quickly.

Second, Babel

http://babeljs.io/

This is to parse our ES6 code, why use it, because for some IE browser, even FF browser, the lower version of the ES6 code is not yet recognized, then the Vue inside a lot of also let us write ES6 code, At this point we can use the Babel tool to translate our ES6 code into code that the browser can recognize.

On the left is the ES6 code we wrote, and the right is the code compiled by Babel this tool. This code can be identified in our various browsers.

So what we call Babel is the compiler for writing next-generation JavaScript.

Modular

In the front-end of a JS file is a module, in JS There is no modular concept.

There are currently four ways to Modularize

1.Commonjs

2.AMD

3.CMD

4.es6module

Es6module supports import and export. It's like the import of Python. However, it must be supported in a server environment, or we may convert ES6 support into ES6 language through Webpack babel-loader.

Here will not give you a demonstration, you can understand. After we use Vue to open the project, the use of it will naturally be understood.

Vue-webpack, Babel