作为一个后端工程师，为了应对层出不从的需求变化，以及为了方便自己，我写过几个简单的前端页面来简化自己的工作流。由于是工作需求，又不是自己的本行，写这些都是糙快猛搞定，没有深究各种概念和框架。Vue, React 和 Angular 都用了个遍，但都是浅尝辄止。之前创建各种项目都是使用了框架提供的命令行工具，比如 vue-cli。这些工具生成的文件都不敢改。最近想做一个业余项目，正好借此机会打牢前端基础。今天这篇文章记录一下前端使用的各种编译/打包工具，之后要是忘了就可以再温习一下。

Babel

Babel 是一个 JS 的编译器，它将现代的 JS 代码编译成浏览器兼容的 JS 代码。和其他的编译器类似，它包含了以下三个阶段:

  1. Parsing
  2. Transforming
  3. Printing

Babel 本身在 transforming 阶段什么也不做，也就是说，它是一个 identity function。开发者可以通过配置 plugin来增强它。而 preset就是一个预定义的 plugin集合。

简单来说，Babel 就是一个让人可以随意使用 JS 新 feature 而不用担心浏览器不支持的编译器。

Webpack

Webpack 是一个静态的打包器，它将你项目中所有的模块打包成一个或多个 bundle。你点击前面的链接就可以看到官方给出的定义，不严谨的来说，就是各种可以被 import/require 的内容。Webpack 可以通过使用 loader 来是用各种语言实现，或者各种预处理器生成的模块。

简单来说，Webpack 就是一个让人可以用最舒服的方式模块化代码的工具。它帮你将所有的模块按依赖打包方便浏览器运行。

总结

没啥好总结的，这里有一个例子，供大家参考。