ES6-Babel和Webpack

ES6-Babel和Webpack

Bable

官网：https://babeljs.io/

在线编译：https://babeljs.io/repl

Babel 是 JavaScript 的编译器，用来将 ES6 的代码，转换成 ES6 之前的代码

Babel 本身可以编译 ES6 的大部分语法，比如 let、const、箭头函数、类
但是对于 ES6 新增的 API，比如 Set、Map、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign/Array.from）都不能直接编译，需要借助其它的模块
Babel 一般需要配合 Webpack 来编译模块语法

Webpack

webpack 是静态模块打包器，当 webpack 处理应用程序时，会将所有这些模块打包成一个或多个文件

静态：
开发过程中存在于本地的 js/css/图片/图标字体等文件，就是静态的
动态的内容，webpack没办法处理，只能处理静态的

模块：
webpack 可以处理 js/css/图片、图标字体等单位

• entry
• output
• loader
• plugins

常见的loader（https://www.webpackjs.com/loaders/）

• css-loader 加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码
• style-loader 将模块导出的内容作为样式并添加到 DOM 中
• file-loader 处理CSS和JS中的图片
• html-withimg-loader 处理html页面上的图片
• url-loader 可以将图片处理为Base64形式

常见的插件（https://www.webpackjs.com/concepts/plugins/）

• html-webpack-plugin 页面模板插件
• mini-css-extract-plugin 页面CSS提取到单独的文件

组件化art-template

模板引擎（http://aui.github.io/art-template/zh-cn/docs/）