模塊構建失敗 - Webpack，React，Babel

我正在關注一個來自複數視域的視頻教程。課程名稱是「使用React，Flux，Webpack和Firebase構建實時應用程序」。模塊構建失敗 - Webpack，React，Babel

請參閱下面的代碼和附加屏幕截圖的問題，我有。當我嘗試重新構建文件時，Webpack失敗。有人可以請告知這個問題可能是什麼。我目前正在使用所有最新的庫。

/*webpack.config.js*/ 

module.exports = { 
entry: { 
    main: [ 
     './src/main.js' 
    ] 
}, 
output: { 
    filename: './public/[name].js' 
}, 
module: { 
    loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel' 
     } 
    ] 
} 
} 



    /*App.jsx*/ 
    import React from 'react'; 

class App extends React.Component { 
constructor() { 
    super(); 
    this.state = { 
     messages: [ 
      'hi there how are you ?', 
      'i am fine, how are you ?' 
     ] 
    } 
} 

render() { 
    var messageNodes = this.state.messages.map((message)=> { 
     return (
      <div>{message}</div> 
     ); 
    }); 

    return (
     <div>{messageNodes}</div> 
    ); 
} 
} 

export default App; 

/*main.js*/ 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './components/App.jsx'; 

ReactDOM.render(<App/>, getElementById('container')); 

/*index.html*/ 
<!DOCTYPE html> 
<html> 
    <head> 
<title></title> 
<meta charset="utf-8" /> 
</head> 
<body> 
<div id="container"></div> 
<script src="public/main.js"></script> 
</body> 
</html> 

/*package.json */ 

{ 
"name": "reatapp", 
"version": "1.0.0", 
"description": "", 
"main": "index.js", 
"scripts": { 
"test": "echo \"Error: no test specified\" && exit 1" 
}, 
"author": "", 
"license": "ISC", 
"dependencies": { 
"babel-core": "^6.1.2", 
"babel-loader": "^6.0.1", 
"babel-preset-react": "^6.1.2", 
"babelify": "^7.2.0", 
"react": "^0.14.2", 
"react-dom": "^0.14.2", 
"webpack": "^1.12.3" 
} 
}

來源

2015-11-10 Erkan Demir

它可能與'output：{filename：./public/ [name] .js}'。嘗試爲路徑添加另一個鍵：'path：'。/ public''。但是我也看到你的main是'main.js'，同時你的代碼在'app.jsx'中。您是否從'./components/app.jsx';'導入應用程序？ – leocreatini

@LeoCreatini是什麼讓你認爲這是問題。這個問題在我添加React代碼後開始。請參閱我的文件目錄的附加屏幕截圖 –

我還在'render（）'''return（）;中看到了缺少的分號;''this.state = {}'中缺少一個分號' – leocreatini

有人解決。答案是安裝預設npm i --save babel-preset-es2015 babel-preset-react。然後在加載程序中加入webpack.config.js中的另一個密鑰：query: {presets: ['es2015', 'react'] }。應該很好走。

來源

2015-11-10 03:18:14 leocreatini

Thx man。示例和教程變得非常快速。 – Andrew

也適用於我。 – fuLLMetaLMan

模塊構建失敗 - Webpack，React，Babel

回答

相關問題