Webpack无法编译React.js项目

Question

我尝试使用webpack v2.2.1和web pack-dev-sever v2.4.1构建我的react模板项目.当我运行"webpack-dev-server --progress --hot --inline --colors"时,Web包报告"编译失败".

我检查了我的.js文件和配置文件,但找不到错误.任何人都可以帮我解决这个问题吗？谢谢.

错误消息

ERROR in ./src/app.js
Module parse failed: /Users/liszt/Develop/react-project/src/app.js Unexpected token (7:9)
You may need an appropriate loader to handle this file type.
| const App = {
|   render() {
|       return <div>
|           Hi
|       </div>
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/app.js
webpack: Failed to compile.

这些是我的app.js文件和web pack配置

app.js

import React from 'react'
import ReactDOM from 'react-dom'

const App = {
    render() {
        return <div>
            Hi
        </div>
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
)

webpack.config.js

const Webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // For css bundle

// For minifying the js. The config is for ignoring the warning msgs
const uglifyJsCfg = new Webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    }
})

const extractCommonsCfg = new Webpack.optimize.CommonsChunkPlugin({
    name: 'vender',
    filename: 'vender.js'
})

const extraCssCfg = new ExtractTextPlugin('style.css')

module.exports = {
    entry: {
        app: './src/app.js',
        vender: [
            'react',
            'react-dom',
        ]
    },

    output: {
        path: `${__dirname}/dist`,
        filename: "app.js"
    },

    module: {
        rules: [
            {
                test: /src\/\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader'
                    }
                ]
            },
            {
                test: /assets\/less\/\.less$/,
                loader: ExtractTextPlugin
            },
            {
                test: /assets\/img\/\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000
                        }
                    }
                ]
            }
        ]
    }, 

    plugins: [
        extractCommonsCfg,
        extraCssCfg,
        uglifyJsCfg,
        new Webpack.NamedModulesPlugin()
    ]
}

我的.babelrc

{
    presets: ['es2015', 'react'],
    plugins: ["transform-object-rest-spread"],
    env: {
        "production": {
            "plugins": ["transform-react-remove-prop-types"]
        }
    }
}

Answer 1

这个测试正则表达式 test: /src\/\.jsx?$/,

可能需要一个*:test: /src\/\*.jsx?$/,

既然你已经声明入口点,你不一定需要指定的目录src中test.所以这是优选的:

test: /\.jsx?$/,