首页 > 使用webpack无法解析jsx语法

使用webpack无法解析jsx语法

使用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'));
}

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

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

【热门文章】
【热门文章】