Reract+Webpack 编译JSX文件

为啥要使用webpack

React的语法是JSX，浏览器并不认识，所以直接引用React写的js文件会报错。
webpack的作用就是将JSX(但不仅限于jsx)编译为浏览器认识的js语法。

初始化

• 项目初始化

npm init -y

• 安装webpack

npm i webpack webpack-cli -D

• 安装React

npm i react react-dom -D

• 安装babel (指导webpack如何将JSX文件转化为js语法的文件)

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

babel-loader webpack适配babel的loader
preset-env 用于编译ES6
preset-react 用于编译React

添加配置文件webpack.config.js

source-map: 帮助在运行时还原源码的，方便定位错误代码。
相应会生成一个 .map文件