Webpack 编译 React.js 项目失败答案

【问题标题】：Webpack failed to compile React.js projectWebpack 编译 React.js 项目失败
【发布时间】：2017-07-25 09:00:00
【问题描述】：

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

我检查了我的 .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"]
        }
    }
}

【问题讨论】：

你是如何配置 Babel 的？
@FelixKling，已添加到帖子中。

标签： javascript reactjs webpack

【解决方案1】：

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

其中可能需要*：test: /src\/\*.jsx?$/,

由于您已经声明了入口点，您不一定需要在test 中指定目录src。所以这是更可取的：

test: /\.jsx?$/,

【讨论】：