您可能需要适当的加载程序来处理此文件类型。react.js，webpack，babel

Question

我正在尝试使用带babel的webpack来编译带有react的js文件，但出现以下错误消息：

./js/IntroAndWorkSpace.js中的错误模块解析失败：C：\\ FULLTIME \\ STUDY METERIAL \\ ReactJS \\ NewReactPoject \\ js \\ IntroAndWorkSpace.js意外令牌（1：8）您可能需要适当的加载器来处理此文件类型。 语法错误：意外令牌（1：8）

这是我的js文件

 import* React from 'react' import* ReactDOM from 'react-dom', ReactDOM.render(<h1>headingthe of page</h1>, document.getElementById('head') ); 

这是pakeje.json

 { "name": "newreactproject", "version": "1.0.0", "description": "myreactproject for learning react", "main": "index.js", "scripts": { "test": "echo \\"Error: no test specified\\" && exit 1" }, "author": "priya", "license": "ISC", "devDependencies": { "babel-core": "^6.14.0", "babel-loader": "^6.2.5", "babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-react-html-attrs": "^2.0.0", "babel-plugin-transform-class-properties": "^6.11.5", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": "^6.14.0", "babel-preset-react": "^6.11.1", "babel-preset-stage-0": "^6.5.0", "react": "^15.3.1", "react-dom": "^15.3.1", "webpack": "^1.13.2" } } 

这是config.js

 var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); module.exports = { context: __dirname, devtool: debug ? "inline-sourcemap" : null, entry: "./js/scripts.js", loaders: [ { test: /\\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], } } ], output: { path: __dirname + "/js", filename: "scripts.min.js" }, plugins: debug ? [] : [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), ], }; 

Answer 1

看来您已正确设置了所有内容。 我相信问题是您的webpack配置文件配置为使用react和ES2015预设通过babel loader加载扩展名为.jsx的文件，但您尝试加载的文件（IntroAndWorkSpace.js）并没有结尾.jsx扩展名。

由于与文件扩展名保持一致可能是个好主意，因此您有两种方法可以解决此问题：

1）将您要加载的文件的扩展名更改为.js而不是.jsx 。

2）更改加载程序测试以加载扩展名为.js而不是.jsx ：

loaders: [
    {
        test: /\.js?$/,
        ...
    }
]

Answer 2

 loaders: [ { test: /\\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], } } ],