React.js頁是空後開始Express服務器+ nodemon + 1個的WebPack

我有以下設置和組件React.js頁是空後開始Express服務器+ nodemon + 1個的WebPack

webpack.config.js

{ 
    "name": "reddice", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "server": "nodemon --watch server --exec babel-node -- server/index.js", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-cli": "^6.24.1", 
    "babel-preset-es2015": "^6.24.1", 
    "express": "^4.15.2", 
    "nodemon": "^1.11.0", 
    "webpack": "^1.13.1", 
    "webpack-dev-middleware": "^1.10.2" 
    } 
}

webpack.config.js

import path from 'path'; 

export default { 
    devtools: 'eval-source-map', 
    entry: path.join(__dirname, '/client/index.js'), 
    output: { 
    path: '/' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     include: path.join(__dirname, 'client'), 
     loaders: ['babel'] 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js'] 

    }  
}

client/index.js

import React from 'react'; 
import {render} from 'react-dom'; 
import App from './components/App'; 

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

客戶端/組件/ App.js

進口從 '反應' 反應;

export default() => { 
    return (
    <h1>Hello from App component</h1> 
);  
}

服務器/ index.html中

<!doctype html> 

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 

    <title>The HTML5 Herald</title> 
    <meta name="description" content="The HTML5 Herald"> 
    <meta name="author" content="SitePoint"> 

    </head> 

    <body> 
    <div id="app"></div> 

    <script source="bundle.js"></script> 
    </body> 
</html>

我運行與命令運行NPM服務器的服務器。 Display webpack：編譯成功。但沒有發生。在控制檯網絡工具中沒有錯誤的空白頁面

來源

2017-05-11 Stefan Hansch

您的index.html假定您的最終包文件被稱爲「bundle.js」。默認情況下，Webpack使用您提供給您入口點的文件的名稱。

內部配置，輸出對象，你必須指定文件名

module.exports = { 
    // .. 
    output: { 
    //.. 
    filename: '/client/bundle.js' 
    } 
}

記住保存文件，你有你的index.html文件相同的文件夾內

來源

2017-05-11 13:52:28 Ematipico

React.js頁是空後開始Express服務器+ nodemon + 1個的WebPack

回答

相關問題