Question

我一直在设立个人项目并做出反应，但收到错误我无法找到答案。 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 <landonkoo0207@gmail.com>",
"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;

我已经被困了几个小时。任何评论都会非常感激！谢谢！

Answer 1

您需要创建.babelrc文件

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

或将预设指定为加载程序选项

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

Answer 2

也使用'react-hot'装载机，请参阅https://github.com/babel/babel-loader/issues/173

Answer 3

对我而言，我的jsx文件具有大写的JSX扩展名

测试：/。（js | jsx）$ /，没有找到大写的JSX，所以需要成为 test：/。（js | jsx | JSX | JS）$ /，

或将大写JSX文件扩展名重命名为小写jsx也可以使用

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

3 个答案: