【webpack】快速笔记11 -- 借助Babel实现对React框架的打包

直入正题

↓ 整理写React代码：

我们上一篇使用的transform-runtime，此时需要更改一下，在.babelrc中更改为presets的配置（特别注意，.babelrc文件中的书写格式是要对应的键和值该双引号的双引号，它就想我们mock数据中写的jsonp一样有自己的规则，否则会报错）：

{
    "presets":[["@babel/preset-env", {
    "targets": {
        "edge": 17,
        "firefox": 60,
        "chrome": 67,
        "safari": 11.1,
    },
        "useBuiltIns": "usage"
    }]]
}

↓ 然后我们在src里的index.html新建一个id为root的DOM节点便签：

↓ 接着我们在index.js中写我们的react代码：

写react代码前我们需要安装一下react框架 → npm install react react-dom --save
安装完后，我们继续写代码index.js：

import "@babel/polyfill";

import React, {Component} from 'react'
import ReactDom from 'react-dom'

class App extends Component {
    render(){
        return <div>Hello World</div>
    }
}

ReactDom.render(<App/>, document.getElementById('root'));

简要概况一下代码意思：

我们引入React框架所需要的库，然后使用TS语法写一个组件，然后通过ReactDom将组件挂载到id为root的Dom节点下，此时该节点下就会显示出React中render渲染出的Hello World

↓ 此时我们直接npx webpack打包看看babel是否可以解析React的语法：

可以看出babel其实不认识React的语法，所以打包失败，那如何解决；

↓ 解决：参考文档：

https://babeljs.io/docs/en/babel-preset-react

按照文档安装Installation：

@babel/preset-react就是解析react里面的逻辑代码包

npm install --save-dev @babel/preset-react

Usage配置：

因为我们有关babel中options的配置统统都在.babelrc中写入了：

同样要注意presets这里的执行顺序，遵循从下到上，从右往左，也就是先执行"@babel/preset-react"将react语法进行转义后，在执行"@babel/preset-env"将ES6语法转义

{
    "presets":[
        ["@babel/preset-env", {
            "targets": {
                "edge": "17",
                "firefox": "60",
                "chrome": "67",
                "safari": "11.1",
            },
            "useBuiltIns": "usage"
            }
        ],
        "@babel/preset-react"
    ]
}

完成：

此时我们运行npm run start重新启动本地服务，此时页面就能成功显示Hello World，如果没有显示出来那就检查一下是否有代码书写错误，依赖的库有没有引入，同时这里使用的targets面对的浏览器版本比较高，如果你使用的浏览器低于targets里配置的，一般看当前浏览器的版本号，在设置都会有的（都是关于xxx的里面就会展示版本号的）

结语

整理一下webpack.config.js里面对应的配置说明 ↓

mode → 声明打包的环境 production || development

devtool → 关于sourchMap映射的方式

entry → 声明webpack打包的入口文件

devServer → 有关webpack-dev-server服务的配置

contentBase → 指定webpack-dev-server服务启动的目录

module → 声明模块的处理方式

rules → 声明相应的模块规则器

test → 匹配相应文件

use → 针对匹配文件使用相应的loader和配置

limit → 文件大小限制使用对应的loader

outputPath → 当前处理规则的打包文件输出路径

plugins → 声明需要使用的插件

output → 声明webpack打包文件的相关配置

更多对应规则后续补充，或者可查webpack官网

over~

#下一篇【Tree Shaking 概念详解~】