webpack与babel

一、Bebal

1、 Bebal是什么

访问bebel（https://babeljs.io/），首页的介绍如下图所示：

Babel是JavaScript编译器。现今，（有了它）就可以使用下一代版本的JavaScript。

简单来说，可以将ES6代码编译为ES6之前，例如ES5、ES3等大多数浏览器可以兼容的代码。

2、Babel 的使用方式

（0）准备工作-安装node.js

可以运行命令node -v或npm -v，通过查看版本测试是否安装成功。

(1) 查看使用方式

Babel的使用方式比较多，常用的方式有CLI（命令行界面）和 webpack， 如下图所示

CLI 命令行方式使用步骤：

先运行命令以下命令，修改node安装包仓库地址（默认是国外地址，下载包速度慢，甚至无法下载！）

npm config set registry https://registry.npm.taobao.org f

第一步：在项目文件夹下初始化项目
npm init
运行命令后，会在项目文件夹子下生成package.json文件，可以记录安装的依赖包。

第二步：安装core和cli包

下载最新版包
nmp install --save-dev @babel/core @babel/cli

指定特定版本
nmp install --save-dev @babel/[email protected] @babel/[email protected]

二、webpack

1、 wabpack 是什么

例如，<img src="https://www.xxx.com/photo> 图片资源在服务器，动态

2. webpack的使用

第一步，初始化项目
npm init

第二步，安装webpack包

npm install --save-dev [email protected] [email protected]

第三步，配置webpack

webpack.config.js