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.

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反应错误：您可能需要适当的加载程序来处理此文件类型

1 个答案: