reactjs在webpack中遇到的一个问题？

Question

遇到的报错，但是不知道如何解决，已经查阅过其他答案了，但是。。。

ERROR in ./src/app.jsx
Module parse failed: E:\前端\React\N2\0511\test\src\app.jsx Unexpected token (18:6)
You may need an appropriate loader to handle this file type.

这是我的git项目仓库
https://github.com/yyccQQu/05...
求大佬帮我运行出来，谢谢了！！！！

Answer 1

保持版本一致。文档！webpack3.5.5
文档地址 http://www.css88.com/doc/webp...

const path              = require('path');
const webpack           = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

let WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
console.log(WEBPACK_ENV); 
module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/',
        // publicPath: WEBPACK_ENV === 'dev' 
        //     ? '/dist/' : '//s.jianliwu.com/admin-v2-fe/dist/',
        filename: 'js/app.js'
    },
    resolve: {
        alias : {
            page        : path.resolve(__dirname, 'src/page'),
            component   : path.resolve(__dirname, 'src/component'),
            util        : path.resolve(__dirname, 'src/util'),
            service     : path.resolve(__dirname, 'src/service')
        }
    },
    module: {
        rules: [
            // react(jsx)语法的处理
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react', 'es2015']
                    }
                }
                
            },
            // css文件的处理
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            // sass文件的处理
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            // 图片的配置
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'resource/[name].[ext]'
                        }
                    }
                ]
            },
            // 字体图标的配置
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'resource/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // 处理html文件 
        new HtmlWebpackPlugin({
            template: './src/index.html',
            favicon: './favicon.ico'
        }),
        // 独立css文件
        new ExtractTextPlugin("css/[name].css"),
        // 提出公共模块
        new webpack.optimize.CommonsChunkPlugin({
            name : 'common',
            filename: 'js/base.js'
        })
    ],
    devServer: {
        port: 8086,
        historyApiFallback: {
            index: '/dist/index.html'
        },
        // proxy : {
        //     '/manage' : {
        //         target: 'http://admintest.happymmall.com',
        //         changeOrigin : true
        //     },
        //     '/user/logout.do' : {
        //         target: 'http://admintest.happymmall.com',
        //         changeOrigin : true
        //     }
        // }
    }
};

package.json

{
  "name": "admin-v2-fe",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/yyccQQu/0511.git",
  "author": "yyccQQu <yyccqqu@qq.com>",
  "license": "MIT",
  "scripts": {
    "dev": "node_modules/.bin/webpack-dev-server",
    "dist": "WEBPACK_ENV=online node_modules/.bin/webpack -p",
    "dist_win": "set WEBPACK_ENV=online&& node_modules/.bin/webpack -p"
  },
  "dependencies": {
    "font-awesome": "^4.7.0",
    "hogan": "^1.0.2",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.4",
    "webpack": "3.5.5",
    "webpack-dev-server": "2.8.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "font-awesome": "^4.7.0",
    "hogan": "^1.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1"
  }
}

Answer 2

你可以使用create-react-app来创建react项目。
这个问题是babel-loader的版本与配置不相符引起的。