webpack 反应错误：您可能需要适当的加载程序来处理此文件类型答案

【问题标题】：webpack react error: You may need an appropriate loader to handle this file typewebpack 反应错误：您可能需要适当的加载程序来处理此文件类型
【发布时间】：2025-12-07 02:35:01
【问题描述】：

响应文件的 Webpack 编译错误。编译器似乎会在每个反应文件上抛出错误，如下所示：

ERROR in ./public/react-components/modules/user/profile/edit.js
Module parse failed: /Workspace/bungaloow/public/react-components/modules/user/profile/edit.js Unexpected token (5:26)
You may need an appropriate loader to handle this file type.

Webpack 配置：

var glob = require('glob');

module.exports = {
    entry: glob.sync('./public/react-components/**/*.{js,json}'),
    output: {
        path: __dirname + '/public/compiled',
        filename: "react-components.js"
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: 'babel-loader', query: {presets: ['es2015','react']}}
        ],
        rules: [
            {
                test: /\.json$/,
                use: 'json-loader'
            },
            {
                test: /\.js$/,
                use: 'babel-loader'
            }
        ]
    },
    watch: true
};

【问题讨论】：

为什么你的规则中没有你的 babel-loader 和 JSX 测试？
我已将其添加到我的规则中，将更新，仍然遇到相同的错误
IIRC 条目应该是对象而不是 2.x 中的数组？

标签： reactjs webpack gulp webpack-dev-server babel-loader

【解决方案1】：

您正在混合使用 Webpack 1 语法 (module.loaders) 和 Webpack 2 语法 (module.rules)。我的猜测是您使用的是 Webpack 2，它只使用了 module.rules，所以您的 babel-loader 配置不正确。

我相信正确的 Webpack 2 语法应该是这样的：

module: {
  rules: [{
    test   : /\.json$/,
    loader : 'json-loader' // `use` is appropriate when you have to chain loaders,
                           // if there's only a single loader, use `loader`
  }, {
    test    : /\.js$/,
    loader  : 'babel-loader',
    options : { presets : ['es2015', 'react'] }
  }]
}

更多信息here。

【讨论】：