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文件，就像你提到的一樣。我很遺憾沒有留下。你能想到導致這種情況的其他原因嗎？感謝您反應！ :) –

我已經想通了。事實證明，我把組件放在了錯誤的地方。不管怎麼說，還是要謝謝你！ –