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

Question

响应文件的 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.  

网络包配置：

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'] }
  }]
}

更多信息在这里。