留意细节的同学，必定要举手问到，同学同学！你的呼吁行中报错啦！黄色部门确实有给我们一个告诫，可是没干系，这个我们接下的设置会修复它的。
这个时候我们会发明，在我们的根目次中生成了一个新的文件夹 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