Webpack React.jsプロジェクトのコンパイルに失敗しました

Question

webpack-v2.2.1 & web pack-dev-sever v2.4.1で反応テンプレートプロジェクトを構築しようとしています。 "webpack-dev-server --progress --hot --inline --colors"を実行すると、Webパックは "Failed to compile"と報告します。

私の.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ファイルやウェブパックの設定

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?$/,

すでにエントリポイントを宣言しているので、あなたは必ずしもtestでディレクトリsrcを指定する必要はありません。だから、これは好ましい。

test: /\.jsx?$/,