前端基础之《React（3）—webpack简介-集成JSX语法支持》
接上篇......
十一、集成JSX语法
1、安装react
cnpm i react -S
cnpm i react-dom -S说明：
（1）-S是代码需要的包，-D是环境需要的包
（2）react-dom是用于挂载的
（3）react作用是用来封装组件的
2、建立react根组件
在src/App.jsx
import React from 'react'class App extends React.Component {render() {return (<div><h1>Hello React</h1></div>)}
}export default App3、main.js创建挂载节点
// 入口文件
import { createRoot } from 'react-dom/client'
import App from './App.jsx'const root = createRoot(document.getElementById('app'))
root.render(<App />)4、babel安装react预设
cnpm i @babel/preset-react -Dbabel.config.js：
// 定义babel的工作方式
module.exports = {// 预设：用于编译哪些比较大的JS版本，比如ES6、TS、Flow、Vue等presets: ['@babel/preset-env','@babel/preset-react' // 用于编译JSX语法],// 插件plugins: [// 这个插件用于编译装饰器语法["@babel/plugin-proposal-decorators", { "version": "2023-11" }]]
}
5、babel-loader增加jsx配置
config.js：
// 两个环境都需要的公共配置// 从node进程中引入path模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin } = require('webpack') // webpack自带插件module.exports = {entry: {// 可以给入口文件取个名字，给output使用app: path.resolve(__dirname, '../', 'src/main.js'),},// 出口output: {// 自定义打包结果的输出目录，默认是dist目录，这里只能使用绝对路径path: path.resolve(__dirname, '../', 'dist'),// 指定打包结果的JS名称规范// filename: 'bundle.js' // 量词，一捆、一束filename: 'js/[name].[chunkhash:8].js',// 每次build打包时，都自动先删除dist中的旧文件clean: true},// 插件// 所有webpack插件都是class，用的时候需要newplugins: [// 用于把JS脚本和index.html自动注入合并new HtmlWebpackPlugin({template: path.resolve(__dirname, '../', 'public/index.html'),inject: 'body', // 把JS注入到body结束标签前面filename: 'index.html', // 指定打包成功后这个模板叫什么名字title: '测试'}),// 添加编译进度条new ProgressPlugin({handler(percentage, message, ...args) {console.log(percentage, message, ...args)}})],// 在webpack眼中一切文件皆模块，webpack必须使用各种loaders来处理各种不同的模块文件module: {// 定义模块编译的规则和方式rules: [{test: /\.(js|jsx|ts|tsx)$/, // 检测模块以js结尾use: ['babel-loader'] // 使用babel编译器把ES6+的代码编译成ES5}]}
}
修改：test: /\.(js|jsx|ts|tsx)$/, // 检测模块以js结尾
6、解决报错信息是编译后的行数
希望调试控制台中报错的位置和src源码位置保持一致。
serve.js：
// 只有开发环境才需要用到配置
module.exports = {mode: 'development',devtool: 'inline-source-map',// 本地服务配置devServer: {port: 8000}
}
build.js：
// 只有打包时才用到配置
module.exports = {mode: 'production',devtool: 'source-map'
}
重启服务，这时报错信息行数变成代码的行数了，而不是编译后的行数：
调试控制台：
devtool: 'inline-source-map'
打包环境：
devtool: 'source-map'
7、解决react没有导入问题
问题：为什么react没有导入？凡是用到JSX的地方，都要导入react
临时解决：import React from 'react'
背后原理：
（1）因为我们用到了jsx语法，jsx要编译成js代码，浏览器才能看的懂
（2）@babel/preset-react它要使用React.createElement()方法进行编译
（3）以后新建jsx文件天天都要导入吗？
（4）把React放在window上，全局上
8、把React放在全局上
使用内置插件ProvidePlugin
config.js：
// 两个环境都需要的公共配置// 从node进程中引入path模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin, ProvidePlugin } = require('webpack') // webpack自带插件module.exports = {entry: {// 可以给入口文件取个名字，给output使用app: path.resolve(__dirname, '../', 'src/main.js'),},// 出口output: {// 自定义打包结果的输出目录，默认是dist目录，这里只能使用绝对路径path: path.resolve(__dirname, '../', 'dist'),// 指定打包结果的JS名称规范// filename: 'bundle.js' // 量词，一捆、一束filename: 'js/[name].[chunkhash:8].js',// 每次build打包时，都自动先删除dist中的旧文件clean: true},// 插件// 所有webpack插件都是class，用的时候需要newplugins: [// 用于把JS脚本和index.html自动注入合并new HtmlWebpackPlugin({template: path.resolve(__dirname, '../', 'public/index.html'),inject: 'body', // 把JS注入到body结束标签前面filename: 'index.html', // 指定打包成功后这个模板叫什么名字title: '测试'}),// 添加编译进度条new ProgressPlugin({handler(percentage, message, ...args) {console.log(percentage, message, ...args)}}),// 从node_modules中加载react包，将其放在全局变量React中，这样之后所有的文件模块都可以直接访问new ProvidePlugin({React: 'react'}),],// 在webpack眼中一切文件皆模块，webpack必须使用各种loaders来处理各种不同的模块文件module: {// 定义模块编译的规则和方式rules: [{test: /\.(js|jsx|ts|tsx)$/, // 检测模块以js结尾use: ['babel-loader'], // 使用babel编译器把ES6+的代码编译成ES5exclude: /node_modules/, // 排除node_modules目录下的第三方包文件}]}
}
因为js结尾的文件babel要编译，但是很多第三方包已经编译过了，所以可以排除这些包：
exclude: /node_modules/, // 排除node_modules目录下的第三方包文件