Vue 项目之 Webpack 对其它文件的转化（1）「这是我参与11月更文挑战的第19天，活动详情查看：2021最后一

「这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战」

前面我们讲了 webpack 对 css 文件、图片、字体等内容的处理以及插件的使用，这些东西虽然没有涉及到 Vue，但在 Vue 的脚手架中这些东西都是比较重要的（因为在 Vue 项目中，你不可能没有 css、图片等内容，也不可能不用插件对诸如 HTML 文件进行打包、对一些文件进行复制）。本节要讲的是 Webpack 对其它文件（包括 .js 文件、.vue 文件）的转化，这就涉及到两个东西：Babel 和某个和 Vue 相关的 loader。下面我们就先来学习一下 Babel。

我们首先做下准备工作：

删除 webpack_插件 目录下的 build 和 node_modules 文件夹；
拷贝一份 webpack_插件 目录，并重命名为 webpack_babel；
打开 VS Code 的终端，切换目录到 webpack_babel 下，运行 npm install 安装当前项目（webpack_babel）所需依赖，安装完成后，项目目录如下：

1. `Babel` 的认识和介绍

为什么需要 babel？
- 事实上，在开发中我们很少直接去接触 babel，但是 babel 对于前端开发来说，目前是不可缺少的一部分。
- 因为开发中如果我们想要使用 ES6+ 的语法，想要使用 TypeScript，开发 React 项目（jsx 转换为 JavaScript 时就是通过 Babel 来完成的）、Vue 项目、Angular 项目（这些框架的脚手架中都封装了 Babel），它们都是离不开 Babel 的。
- 所以，学习 Babel 对于我们理解代码从编写到线上的转变过程至关重要。
那么，Babel 到底是什么？
- Babel 是一个工具链，主要用于旧浏览器或者环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript；
- 包括：语法转换、源代码转换等；
  
  比如对一个数组中的每个数字元素加 1，我们可能比较喜欢通过 ES6 中箭头函数的语法去编写代码：
```
[1, 2, 3].map((n) => n + 1);
```
  使用箭头函数相比于普通的函数，看起来非常直观，写起来也更方便，可以提高我们的开发效率，但是，诸如箭头函数等 ES6+ 语法，有些浏览器由于版本低可能识别（解析）不了，到时候在这些浏览器上跑这些 ES6+ 语法编写的代码就会报错（因为并不是所有的 JS 引擎都可以正常地解析 ES6 语法的，有些 JS 引擎可能是不能解析的，那么运行的时候就会报错）。而 ES5 的语法已经出来很久了，所以基本上所有浏览器都是支持 ES5 语法的。因此，我们需要将编写的 ES6+ 代码转换成 ES5 语法的代码：
```
[1, 2, 3].map(function(n) {
  return n + 1;
});
```
  这个转换过程我们肯定不会手动来完成，这时，我们就可以使用 Babel 来帮我们转换了。

关于 Babel 的更多内容，可以查阅 Babel 的官网：babeljs.io/

那么，如何来使用 Babel 呢？下面，我们先来讲下如何在命令行中使用 Babel，之后再来讲如何在 Webpack 中使用 Babel。

Vue 项目之 Webpack 对其它文件的转化（1）

1. Babel 的认识和介绍

1. `Babel` 的认识和介绍