webapck5 学习 2 -- 解析 ES6 与 JSX解析 ES6 使用 babel-loader 进行 ES6 的

使用 babel-loader 进行 ES6 的解析

babel 的配置文件： .babelrc

npm i @babel/core @babel/preset-env babel-loader -D

这里说明一下：

babel 7 以后，使用 @ 标识符来标识新版本，有点类似与 vue-cli 与 @vue/cli 的关系
babel 的功能在于==代码转译==，就是说将目标代码转译为符合期望语法规范的代码。在转译的过程中，babel 内部经历了三个步骤，解析 --> 转换 --> 生成。而 @babel/core 负责解析，具体的转换与生成步骤则交给各种插件（plugin）和预设（preset）来完成

插件	作用
@babel/core	解析
@babel/preset-*	各种插件的打包组合，也是各种转译规则的统一设定，告诉loader需要按照什么规则转换js
babel-loader	使 webpack 可以通过 babel 转译 js 代码

{
    "presets": [
        "@babel/preset-env"
    ]
}

npm i react react-dom @babel/preset-react -D

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}