Webpack無法編譯React.js項目

我嘗試使用webpack v2.2.1構建我的反應模板項目& web pack-dev-sever v2.4.1。當我運行「webpack-dev-server -progress -hot -inline -colors」時，網絡包報告「無法編譯」。Webpack無法編譯React.js項目

我檢查了我的.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包配置

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"] 
     } 
    } 
}

來源

2017-03-05 Ezek

你是怎麼配置Babel的？ –

@FelixKling，已添加到帖子。 – Ezek

這個測試正則表達式test: /src\/\.jsx?$/,

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

既然你已經聲明入口點，你不一定需要在test到指定的目錄src。所以這是可取的：

test: /\.jsx?$/,

來源

2017-03-05 14:59:45

修改爲您的語法後，它的作品！謝謝！ – Ezek

Webpack無法編譯React.js項目

回答

相關問題