这个时候我们会发现，在我们的根目录中生成了一个新的文件夹 dist。这个就是 webpack 打包默认生成的文件夹，我们所有打包好的 JavaScript 和资源都会被默认放入这个文件夹当中。
这里我们就会发现，这个 dist 文件夹里面有一个打包好的 main.js 的文件，这个就是我们写的 main.js，通过 webpack 被打包好的版本。
然后我们打开它，就会看到它被 babel 编译过后的 JavaScript 代码。我们会发现我们短短的几行代码被加入了很多的东西，这些其实我们都不用管，Webpack 的 “喵喵力量”。
在代码的最后面，还是能看到我们编写的 for 循环的，只是被改造了一下，但是它的作用是一致的。
安装 Babel-loader接下来我们来安装 babel-loader，其实 babel-loader 并没有直接依赖 babel 的，所以我们才需要另外安装 @babel/core 和 @babel/preset-env。我们只需要执行下面的命令行来安装：
npm install --save-dev @babel/core @babel/preset-env
最终的结果就如上图一样，证明安装成功了。这个时候我们就需要在 webpack.config.js 中配置上，让我们打包的时候用上 babel-loader。
在我们上面配置好的 webpack.config.js 的 entry 后面添加一个选项叫做 module。
然后模块中我们还可以加入一个 rules，这个就是我们构建的时候所使用的规则。而 rules 是一个数组类型的配置，这里面的每一个规则是由一个 test 和一个 use 组成的。
test:
test 的值是一个正则表达式，用于匹配我们需要使用这个规则的文件。这里我们需要把所有的 JavaScript 文件给匹配上，所以我们使用 /\.js/ 即可。
use:
loader: 只需要加入我们的 babel-loader 的名字即可
options:
presets:
这里是 loader 的选项，这里我们需要加入 @babel/preset-env
最后我们的配置文件就会是这个样子：
module.exports = { entry: 'https://www.jb51.net/article/main.js', module: { rules: [ { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, ], }, };
这样配置好之后，我们就可以来跑一下 babel 来试一试会是怎么样的。与刚才一样，我们只需要在命令行执行 webpack 即可。
如果我们的配置文件没有写错，我们就应该会看到上面图中的结果。
然后我们进入 dist 文件夹，打开我们编译后的 main.js，看一下我们这次使用了 babel-loader 之后的编译结果。
编译后的结果，我们会发现 for of 的循环被编译成了一个普通的 for 循环。这个也可以证明我们的 babel-loader 起效了，正确把我们新版本的 JavaScript 语法编程成能兼容旧版浏览器的 JavaScript 语法。
到了这里我们已经把我们 JSX 所需的环境给安装和搭建完毕了。
模式配置最后我们还需要在 webpack.config.js 里面添加一个环境配置，不过这个也可以说可加可不加的，但是我们为了平时开发中的方便。
所以我们需要在 webpack.config.js 中添加一个 mode，这个属性的值我们使用 development。这个配置表示我们是开发者模式。
一般来说我们在代码仓库里面写的 webpack 配置都会默认加上这个 mode: 'development' 的配置。当我们真正发布的时候，我们就会把它改成 mode: 'production'。
module.exports = { entry: 'https://www.jb51.net/article/main.js', mode: 'development', module: { rules: [ { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, ], }, };
改好之后，我们在使用 webpack 编译一下，看看我们的 main.js 有什么区别。
显然我们发现，编译后的代码没有被压缩成一行了。这样我们就可以调试 webpack 生成的代码了。这里我们可以注意到，我们在 main.js 中的代码被转成字符串，并且被放入一个 eval() 的函数里面。我们的代码被放入了 eval 里面，那么我们就可以在调试的时候就可以把它作为一个单独的文件去使用了。
引入 JSX万事俱备，只欠东风了，最后我们需要如何引入 JSX呢？在引入之前，我们来看看，如果就使用现在的配置在我们的 main.js 里面使用 JSX 语法会怎么样。作为程序员的我们，总得有点冒险精神！
所以我们在我们的 main.js 里面加入这段代码：
var a = <div/>
然后我们执行 webpack 看看！
