webpack.config.js
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./app.js",
html: "./index.html",
},
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
filename: "app.js",
path: __dirname + "/dist",
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
},
],
},
}
package.json
{
"name": "react-webpack-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.0.15",
"babel-core": "^6.0.20",
"babel-loader": "^6.0.1",
"file-loader": "^0.8.4",
"webpack": "^1.12.2"
},
"dependencies": {
"react": "^0.14.2"
}
}
app/app.js
import React from "react";
import Greeting from "./greeting";
React.render(
<Greeting name="World"/>,
document.body
);
周りを検索した後、まったく同じ質問を見ましたが、答えはどれも当てはまらないようです。 webpack
を実行すると、次のエラーが表示されます。
./app.jsのエラー
モジュールのビルドに失敗しました:SyntaxError:path/to/project/react-webpack-project/app/app.js:予期しないトークン(5:2)
React.render(
<Greeting name="World"/>,
document.body
);
このエラーがまだ発生する理由がわかりません。 webpack.config.jsファイルと関係があると思いますが、問題は100%ではありません。
まず、React v ^ 0.14を使用している場合、React-Domを使用してコードをレンダリングする必要があります。 https://www.npmjs.com/package/react- dom
第二に、これはあなたの問題を解決するはずです: babel-loader jsx SyntaxError:Unexpected token
Babel-loaderにプリセットを追加する必要があります。
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
presets: ['es2015', 'react']
},
私は現在React 0.14.3を使用しています。ReactDOMソリューションは動作しませんでした。また、webpack.config.jsにbabelプリセットを追加しませんでした。基本的に、これらのソリューションは単一のローダーが定義されていますが、babel-loaderとreact-hot loaderの両方がありました。
DID作業はbabel反応プリセットモジュールをインストールすることでした:
npm install babel-preset-react
次に、次のようにプロジェクトディレクトリに.babelrcファイルを作成します。
{
"presets": ['react']
}
これは Abhinav Singi が指すように http://babeljs.io/docs/plugins/preset-react/ で文書化されています
私にとっての答えは、クエリブロックにプリセットを含めることでした。
query: {
presets: ['react', 'es2015']
}
これはその問題を解決するのに役立ちます。
同じディレクトリwebpack.config.jsに新しいファイル.babelrc
を作成します。これを.babelrc
に追加します
{
"stage": 2,
"env": {
"development": {
"plugins": [
"react-display-name",
"react-transform"
],
"extra": {
"react-transform": {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}
}
}
}
}