使用webpack无法解析jsx语法

Question

使用npm run dev后报错如下（dev已经在javascripts中配置）：

ERROR in ./app/main.js
Module build failed: SyntaxError: /Users/yiming/Desktop/ReactTest/webpack2/app/main.js: Unexpected token (8:8)
  6 | 
  7 | function main() {
> 8 |     render(<Hello />, document.getElementById('example'));
    |            ^
  9 | }

//webpack.config.js
var path = require("path");

var config = {
    entry: [path.resolve(__dirname, "app/main.js")],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
    resolve: {
      extensions: ['', '.js', '.jsx']
    },    
    module: {
      loaders: [{
        test: /\.jsx?$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
        loader: 'babel' // 加载模块 "babel" 是 "babel-loader" 的缩写
      }]
    }
};
module.exports = config;

//main.js
import ReactDOM from "react";
import { render } from 'react-dom';
import Hello from "./component.js";

main();

function main() {
    render(<Hello />, document.getElementById('example'));
}

Answer 1

module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['react', 'es2015']
            }
        }
    ]
},

Answer 2

你需要把你的webpack配置发出来啊

Answer 3

{
  test: /\.jsx?$/,
  exclude: /(node_modules|bower_components)/,//要排除node_modules,bower_components下的JS文件
  loader: 'babel-loader',
  query: {
    presets: ['react', 'es2015']//支持react jsx和ES6语法编译
  }
}

Answer 4

补充下 webpack@v4 的爬坑设置：

module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/react", "@babel/preset-env"]
          }
        }
      }
    ]
  },

所依赖项的版本：

"devDependencies": {
    "@babel/cli": "^7.7.7",
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.3.10"
  },

下载：
npm install -D @babel/core @babel/preset-env babel-loader webpack

总结下 webpack@v3:

module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env", "react"]
          }
        }
      },
}

package.json:

"devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "webpack": "3.10.0",
    "webpack-dev-server": "2.9.7"
  },