Webpack成功編譯但在瀏覽器中不顯示輸出

我的項目中的webpack成功運行，但是當我到達所需的端口時，它會顯示目錄文件。你可以看到相同的圖像。Webpack成功編譯但在瀏覽器中不顯示輸出

我webpack.config.js

const path = require('path'); 

module.exports = { 
    entry: './app/main.js', 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'bundle.js' 
    }, 
    devServer: { 
    inline: true, 
    port: 8100 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader' 
     } 
    ] 
    } 
}

的package.json

{ 
    "name": "react_router", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "webpack-dev-server" 
    }, 
    "author": "vinay", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4", 
    "react-router": "^2.0.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.0.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "webpack": "^2.6.1", 
    "webpack-dev-server": "^2.4.5" 
    } 
}

main.js

import React from 'react' 
import ReactDOM from 'react-dom' 
import App from './app' 
ReactDOM.render(<App />, document.getElementById('root'));

app.js

import React, {Component} from 'react'; 
import {Router, Route, Link, IndexRoute, hashHistory, browserHistory} from 'react-router'; 

const App =() => <h1>Hello World</h1> 

export default App

輸出==>

任何幫助，將不勝感激。

來源

2017-06-13 V.Spock

您沒有用於顯示webpack-dev-server的'index.html'文件。添加一個'index.html'文件，並帶有指向你的包的鏈接。 – nrgwsth

我在App目錄中有index.html文件。但是，我如何將它添加到捆綁包？ –

您需要在'index.html'中提供'bundle'腳本url – nrgwsth

編輯答案：我能得到它的工作：

1）的根文件夾 2）下創建實際的dist目錄讓你的輸出在webpack.config.js是這樣的：

output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/dist/' 
},

它會告訴webpack從哪裏爲您的應用程序提供服務。

3）將下列腳本添加到您的package.json

"build": "webpack -p"

將建立bundle.js文件

還，您將需要一個index.html文件在你的dist目錄，看起來像這樣：

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Application<title> 
    </head> 
    <body> 
    <div id="app"></div> 
    <script src="bundle.js"></script> 
    </body> 
</html>

那麼，你運行你的構建腳本之後，你可以運行的WebPack服務器，它應該工作

來源

2017-06-13 07:59:21

它還沒有工作 –

你真的有一個dist目錄嗎？你是否也可以發佈構建輸出？ –

不，它不會生成dist文件夾，但它說webpack編譯成功。 –

Webpack成功編譯但在瀏覽器中不顯示輸出

回答

相關問題