無法在瀏覽器中使用Babel和Webpack加載ReactJS資源

我試圖通過運行基本程序來學習ReactJS。無法在瀏覽器中使用Babel和Webpack加載ReactJS資源

webpack.config.js

var config = { 
    entry: './main.js', 

    output: { 
     path: './', 
     filename: 'index.js' 
    }, 

    devServer: { 
     inline: true, 
     port: 8080 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader', 

       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
      ] 
    } 
} 

module.experts = config;

的package.json

{ 
    "name": "reactapp", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --hot" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.11.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    } 
}

App.jsx

import React from 'react'; 

class App extends React.Component { 
    render() { 
    return (
    <div> 
     "Hello, world." 
    </div> 
    ); 
    } 
} 

export default App;

main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App.jsx'; 

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

index.html

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
    <meta charset="utf-8"> 
    <title>React App</title> 
</head> 
<body> 
    <div id = "app"></div> 
    <script type="text/javascript" src = "index.js"></script> 
</body> 
</html>

在啓動服務器時，我看到一個沒有內容的空白頁面。 HTML頁面在那裏，但是由React添加到DOM的部分無法看到。

index.js被設置爲包含我們捆綁應用程序的文件，但瀏覽器的控制檯顯示'Faile to load resource index.js（404）'錯誤。如果我將HTML腳本標記的src屬性更改爲main.js，則會使用import語句獲取SyntaxError。

我懷疑問題是沒有正確地連接Babel或其他依賴與我的包。

來源

2016-07-27 Vishal Khanna

裏面webpack.config.js有錯字，必須exports，而不是experts

module.exports = config; 
     ^

在這種情況下，你不會從 webpack.config.js導出配置

，並webpack不知道您的自定義配置和使用默認配置。

來源

2016-07-27 08:43:03

我認爲webpack.config.js會像

devtool: 'eval', 
entry: './src/index', 
output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/', 
}, 
module: { 
    loaders: [{ 
    test: /\.js$/, 
    loaders: ['babel'], 
    exclude: /node_modules/, 
    include: __dirname, 
    }], 
}

和<script>

<script type="text/javascript" src = "/static/bundle.js"></script>

來源

2016-07-27 09:16:22

無法在瀏覽器中使用Babel和Webpack加載ReactJS資源

回答

相關問題