Webpack Dev Server 默认无法识别 JSX 语法，需通过 Babel 配置 babel-loader 及 React 预设，配合文件扩展名解析，才能成功编译 React 组件。
webpack dev server 默认无法识别 jsx 语法，需通过 babel 配置 `babel-loader` 及 react 预设，配合文件扩展名解析，才能成功编译 react 组件。
要使 Webpack Dev Server 支持 JSX（如 <app></app> 这类语法），关键在于为 .jsx 文件配置正确的转译流程：Webpack 本身不处理 JSX，必须借助 Babel 将 JSX 和现代 JavaScript 转译为浏览器兼容的代码。
✅ 必备依赖安装
首先安装核心 Babel 工具链和 React 支持：
yarn add --dev @babel/core @babel/preset-env @babel/preset-react babel-loader
⚠️ 注意：
babel-loader是 Webpack 与 Babel 的桥梁，不可遗漏；--dev表明这些是开发依赖。
✅ 配置 Babel
在项目根目录创建 babel.config.js（推荐方式，支持继承与工具链集成）：
// babel.config.js
module.exports = {
presets: [
'@babel/preset-env', // 转译 ES2015+ 语法（如箭头函数、解构）
'@babel/preset-react' // 转译 JSX 和 React 相关语法（如 <App /> → React.createElement）
]
};✅ 更新 Webpack 配置
修改 webpack.config.js，确保：
-
resolve.extensions包含'.jsx'，使import App from './App'可自动匹配App.jsx； -
module.rules中添加babel-loader，精准处理.js和.jsx文件，并排除node_modules提升性能：
// webpack.config.js
const path = require('path');
module.exports = {
entry: './app/javascript/components/index.jsx',
resolve: {
extensions: ['.js', '.jsx'] // ✅ 允许省略后缀导入 .jsx 文件
},
module: {
rules: [
{
test: /\.(js|jsx)$/, // ✅ 匹配 .js 和 .jsx
exclude: /node_modules/, // ✅ 避免转译第三方模块
use: {
loader: 'babel-loader' // ✅ 启用 Babel 转译
}
}
]
},
// 其他配置（如 output、mode）保持不变...
};✅ 验证与常见问题
- ✅ 运行
yarn run webpack-dev-server后，错误Module parse failed: Unexpected token应消失； - ❌ 若仍报错，请检查：
-
babel.config.js是否位于项目根目录且拼写正确（非.babelrc，后者在 Webpack 5+ 中可能失效）； -
webpack.config.js是否已重启服务（修改配置后需重启 dev server）； -
.jsx文件是否确实使用了 JSX 语法（如<div> 标签），纯 <code>.js文件无需此配置。完成以上步骤，你的 React JSX 组件即可被 Webpack Dev Server 正确加载、转译并热更新——这是构建现代化 React 开发环境的基础一环。
-
