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

我一直在设置个人项目的反应，但得到一个错误，我无法找到答案。的WebPack一直给以下错误信息：Webpack错误：“您可能需要一个合适的加载程序来处理此文件类型”

ERROR in ./app/components/Home.js 
Module parse failed: 
/Users/LandonKoo/projects/lktheprogrammer/app/components/Home.js Unexpected token (5:10) 
You may need an appropriate loader to handle this file type. 
| class Home extends Component{ 
| render() { 
|  return (<h1>Hey!!!! Home!!</h1>); 
| } 
| } 
@ ./app/src/index.js 11:12-44

的package.json：

{ 
    "name": "lktheprogrammer", 
    "version": "1.0.0", 
    "description": "Blog for LK the Programmer", 
    "main": "index.js", 
    "scripts": { 
    "watch": "webpack -d --watch", 
    "production": "webpack -p" 
}, 
"author": "Landon Koo <[email protected]>", 
"license": "ISC", 
"devDependencies": { 
    "babel-core": "^6.24.0", 
    "babel-loader": "^6.4.1", 
    "babel-preset-es2015": "^6.24.0", 
    "babel-preset-react": "^6.23.0", 
    "html-webpack-plugin": "^2.28.0", 
    "webpack": "^2.3.1", 
"webpack-dev-server": "^2.4.2" 
}, 
"dependencies": { 
    "babel-core": "^6.24.0", 
    "babel-loader": "^6.4.1", 
    "react": "^15.4.2", 
    "react-bootstrap": "^0.30.8", 
    "react-dom": "^15.4.2", 
    "react-router": "^2.8.1" 
} 
}

webpack.config.js：

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'app/dist'); 
var APP_DIR = path.resolve(__dirname, 'app/src'); 

var config = { 
    entry: APP_DIR + '/index.js', 
    output: { 
    path: BUILD_DIR, 
    filename: 'index_bundle.js' 
    }, 
    module : { 
    loaders : [ 
     { 
     test : /\.(js|jsx)$/, 
     include : APP_DIR, 
     exclude : /node_modules/, 
     loader : 'babel-loader' 
     } 
    ] 
    } 
}; 

module.exports = config;

我一直坚持为这个小时。任何评论将非常感谢！谢谢！

来源

2017-03-24 Landon Koo

您需要创建.babelrc文件

//./.babelrc 
{ 
    "presets":[ 
     "es2015", "react" 
    ] 
}

或指定预设的加载程序选项

{ 
    test : /\.(js|jsx)$/, 
    include : APP_DIR, 
    exclude : /node_modules/, 
    loader : 'babel-loader', 
    query: { presets: ['es2015', 'react']} 
}

来源

2017-03-24 06:36:01

我有.babelrc文件，就像你提到的一样。我很遗憾没有留下。你能想到导致这种情况的其他原因吗？感谢您反应！ :) –

我已经想通了。事实证明，我把组件放在了错误的地方。不管怎么说，还是要谢谢你！ –