webpack react error: You may need an appropriate loader to handle this file type

Question

React 文件的 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
};

Answer 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。

webpack react error: You may need an appropriate loader to handle this file type

webpack react error: You may need an appropriate loader to handle this file type

reactjs

gulp

webpack

webpack-dev-server

babel-loader