react-webpack 配置问题

Question

总是无法写jsx语法

main.js代码

import React from 'react';
import { render } from 'react-dom';


render(
  <div>hello</div>,
  document.getElementById('mountNode')
);

错误信息

wuhongsudeMacBook-Air:test wuhongsu$ webpack
Hash: 2fe82643fe545466d348
Version: webpack 3.4.1
Time: 387ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.08 kB       0  [emitted]  main
   [0] ./app/main.js 612 bytes {0} [built] [failed] [1 error]

ERROR in ./app/main.js
Module build failed: SyntaxError: Unexpected token (6:2)

  4 | 
  5 | render(
> 6 |   <div>hello</div>，
    |   ^
  7 |   document.getElementById('mountNode')
  8 | );

package.json配置

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "webpack": "^3.4.1"
  }
}

webpack配置

var path = require('path');

module.exports = {
    entry: './app/main.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.js|jsx$/, loaders: ['babel-loader'] }
        ]
    }
}

Answer 1

必须加上参数

query:{
   presets: ['es2015','react']  
}

Answer 2

module: {
    rules: [
        {
            test: /\.jsx?$/,
            include: [SRC_PATH],
            exclude: [
                path.resolve(ROOT_PATH, "node_modules")
            ],
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["react"]
                }
            }
        }
    ]
}

Answer 3

https://www.npmjs.com/package... 题主可以使用这个Npm包快速生成一个React项目，内置React-router、 HMR、还有几个参考学习案例(Todolist、双向绑定)，希望能对你有帮助。

Answer 4

貌似webpack缺少对应的loader