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文件

引用编译后js文件

将index.html中引用的js文件修改为配置文件中的 bundle.js文件

编译

直接命令行执行 webpack

至此，最基本的React+Webpack的结构就已搭建完毕。

思考：还有css文件，资源文件如图片字体等需要引用，如何添加到webpack.config.js文件中呢？