Question

错误： ./app/main.js中的错误模块解析失败：E：\ project \ app \ main.js意外的令牌（9:14）您可能需要适当的加载程序来处理此文件类型。 SyntaxError：意外的令牌（9:14）在Parser.pp.raise（E：\ project \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：923：13）在Parser.pp.unexpected（E：\ project \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1490：8）在Parser.pp.parseExprAtom（E：\ project \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：333：12）在Parser.pp.parseExprSubscripts（E：\ project \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：228：19）在Parser.pp.parseMaybeUnary（E：\ project \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：207：17）在Parser.pp.parseExprOps（E：\ project \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：154：19）在Parser.pp.parseMaybeConditional（E：\ project \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：136：19）在Parser.pp.parseMaybeAssign（E：\ project \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：112：19）在Parser.pp.parseExprList（E：\ project \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：660：23）在Parser.pp.parseSubscripts（E：\ project \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：252：29） @多主文件路径：

[在此处输入图像说明] [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']
                    }
            }
    ]
}};

component.jsx

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

main.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。

Answer 2

我会建议你两个改变：您应该从

更新您的加载程序

array_splice($receiver, 0, count($setter), $setter);
print_r($receiver);

到

test:/\.jsx$/

适用于具有反应预设的加载器，可应用于test:/\.(js|jsx)$/和.js文件您.jsx也使用main.js代替ReactDOM.render()。而且你并不需要在函数中编写它。

<强> main.js

React.render()

使用webpack工作流程和反应。当我运行'npm run dev'时，出现错误：模块解析失败

2 个答案: