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

Question

Webpack编译反应文件的错误。编译器似乎在每一个反应与以下文件抛出错误：与的WebPack 2语法（module.rules）

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）：

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配置。我的猜测是你使用的是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。