Webpack 4如何加载JSX文件？配置扩展名后文件未被处理

你遇到的问题我之前也踩过坑——只配置resolve.extensions确实能让Webpack找到.jsx文件（比如import的时候不用写后缀），但Webpack本身并不认识JSX语法，必须借助Babel来完成转译工作。下面是一步步的解决步骤：

1. 安装必要的依赖 #

首先得装Webpack核心工具、Babel核心库，以及处理React JSX的预设和对应的loader：

# 使用npm安装
npm install webpack webpack-cli @babel/core babel-loader @babel/preset-react --save-dev

# 或者用yarn
yarn add webpack webpack-cli @babel/core babel-loader @babel/preset-react --dev

2. 完善Webpack配置文件 #

修改你的webpack.config.js，除了保留原来的resolve配置，还要添加module.rules来指定JSX文件的处理规则：

module.exports = {
  // 指定入口文件（根据你的项目结构调整）
  entry: './src/index.jsx',
  // 输出配置（可选，但建议明确打包后的文件位置）
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  resolve: {
    // 保留你原来的扩展名配置，支持省略.jsx和.js后缀
    extensions: [".jsx", ".js"]
  },
  module: {
    rules: [
      {
        // 匹配所有.js和.jsx文件
        test: /\.(js|jsx)$/,
        // 排除node_modules目录，避免转译第三方依赖（提升打包速度）
        exclude: /node_modules/,
        // 使用babel-loader来处理这些文件
        use: 'babel-loader'
      }
    ]
  }
};

3. 配置Babel转译规则 #

Babel需要知道用什么规则转译JSX，有两种配置方式：

方式一：创建独立的.babelrc文件 #

在项目根目录新建.babelrc文件，内容如下：

{
  "presets": ["@babel/preset-react"]
}

@babel/preset-react预设会自动处理JSX语法，把它转换成浏览器能识别的普通JavaScript。

方式二：在Webpack配置中直接指定 #

如果不想单独创建.babelrc，可以把预设配置写在babel-loader的选项里：

// 修改webpack.config.js里的rules部分
use: {
  loader: 'babel-loader',
  options: {
    presets: ['@babel/preset-react']
  }
}

验证配置 #

完成以上步骤后，运行Webpack打包命令：

# 开发模式打包
npx webpack --mode development

# 生产模式打包（会压缩代码）
npx webpack --mode production

这时候你的src/index.jsx就能被正确转译并打包了。

内容的提问来源于stack exchange，提问作者aarkerio