Webpack3 无法解析 JSX 文件

Question

我对基于 React 的应用程序有以下配置，该应用程序在 webpack 构建期间 JSX 解析失败：

ERROR in ./src/App.jsx
Module parse failed: /Users/sangupta/git/plx/ui2/src/App.jsx Unexpected token (9:15)
You may need an appropriate loader to handle this file type.
| 
|     render() {
|         return <div class='hello'>Hello World</div>;
|     }
| 
 @ multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server src/App.jsx

有什么可能出错的建议吗？

以下是package.json文件：

{
  "name": "Test-Project",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "autoprefixer": "6.4.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "0.28.4",
    "file-loader": "0.9.0",
    "html-webpack-plugin": "2.30.1",
    "less": "2.7.1",
    "less-loader": "2.2.3",
    "postcss-loader": "2.0.5",
    "style-loader": "0.13.2",
    "webpack": "3.4.1",
    "webpack-dev-server": "2.6.1"
  },
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "scripts": {
    "build": "webpack",
    "build-production": "NODE_ENV=production npm run build",
    "watch": "webpack-dev-server --hot --progress"
  }
}

以下是webpack.config.json文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
    context: __dirname,


    entry: {
        app: 'src/App.jsx',
        vendor: [ "react", "react-dom" ]
    },


    devServer: {
        contentBase: path.join(__dirname, 'assets'),
        compress: true,
        port: 9000,
        hot: true,
        https: false,
        noInfo: false,
        historyApiFallback: true
    },

    resolve: {
        extensions: [ '.js', '.jsx' ],
        alias: {
            src: './src'
        },
    },


    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                include: [
                    path.resolve(__dirname, "src")
                ],
                exclude: /node_modules/,
                loader: [
                    'babel-loader',
                ],
                options: {
                    presets: [ "es2015" ]
                }
            },
            { 
                test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3|css)$/, 
                use: [
                    "file-loader" 
                ]
            }
        ]
    },
    output: {
        path: path.join(__dirname, 'build'),
        filename: '[name].js'
    },
    devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',
    module: {
        rules: []
    },


    // Tell webpack to use html plugin
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        }),
        new webpack.ProvidePlugin({
            'React': 'react',
        }),
        new UglifyJsPlugin({ sourceMap: !isProduction }),
        new HtmlWebpackPlugin({ title: 'MultiPLX', template: 'src/index.ejs', inject : 'body'  })
    ]

};

Answer 1

你应该使用react babel preset:

npm install --save-dev babel-preset-react

webpack.config.js

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            include: [
                path.resolve(__dirname, "src")
            ],
            exclude: /node_modules/,
            loader: [
                'babel-loader',
            ],
            options: {
                presets: [ "react", "es2015" ]
            }
        },
        { 
            test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3|css)$/, 
            use: [
                "file-loader" 
            ]
        }
    ]
},