您可能需要適當的加載程序來處理此文件類型。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'], } } ],