javascript - 使用webpack无法解析jsx语法
巴扎黑
巴扎黑 2017-04-11 10:24:18
0
2
270

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!