javascript - 使用 webpack 和 React 构建的工作流程。当我运行 'npm run dev' 时，出现错误 :Module parse failed

Question

error: ERROR in ./app/main.js Module parse failed: E:\project\app\main.js Unexpected token (9:14) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (9:14) at Parser.pp.raise (E:\project\node_modules\webpack\node_modules\acorn\dist\acorn.js:923:13) at Parser.pp.unexpected (E:\project\node_modules\webpack\node_modules\acorn\dist\acorn.js:1490:8) at Parser.pp.parseExprAtom (E:\project\node_modules\webpack\node_modules\acorn\dist\acorn.js:333:12) at Parser.pp.parseExprSubscripts (E:\project\node_modules\webpack\node_modules\acorn\dist\acorn.js:228:19) at Parser.pp.parseMaybeUnary (E:\project\node_modules\webpack\node_modules\acorn\dist\acorn.js:207:17) at Parser.pp.parseExprOps (E:\project\node_modules\webpack\node_modules\acorn\dist\acorn.js:154:19) at Parser.pp.parseMaybeConditional (E:\project\node_modules\webpack\node_modules\acorn\dist\acorn.js:136:19) at Parser.pp.parseMaybeAssign (E:\project\node_modules\webpack\node_modules\acorn\dist\acorn.js:112:19) at Parser.pp.parseExprList (E:\project\node_modules\webpack\node_modules\acorn\dist\acorn.js:660:23) at Parser.pp.parseSubscripts (E:\project\node_modules\webpack\node_modules\acorn\dist\acorn.js:252:29) @ multi main 文件路径：

[在此处输入图像描述][1]

webpack.config.js:

var path = require('path');
module.exports = {
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
 path.resolve(__dirname,'app/main.js')
],
output:{
    path:path.resolve(__dirname,'build'),
    filename:'bundle.js'
},
module :{
    loaders :[
            {
                test:/\.jsx$/,
                loader:'babel-loader',
                exclude:/node_modules/,

                query:
                    {
                        presets:['es2015','stage-0','react']
                    }
            }
    ]
}};

组件.jsx

import React from 'react';
export default class Hello extends React.Component{
render(){
    return <h1>Hello World</h1>;
}}

ma​​in.js:

'use strict';
import React from 'react';
import Hello from './component.jsx';
main();
function main(){
React.render(<Hello />,document.getElementById('app'));}

package.json

{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --           content-base build"},
"dependencies": {
"react": "^15.2.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"},
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4"}}

.babelrc:

{"presets": ["es2015", "stage-0", "react"]}

Answer 1

带有 react presets 的加载器将仅应用于 .jsx 文件扩展名。由于 main.js 文件中有 JSX 代码，因此您应该从

更新您的加载程序

test:/\.jsx$/

到

test:/\.(js|jsx)$/

它只是说:测试 .js 或 .jsx。