Webpack-dev-server在HTML页面中注入包，但未呈现任何内容

Question

When I run webpack-dev-server (Command: "webpack-dev-server --mode development --open --progress --hot"), my bundle is injected into the html page, but nothing is rendered.

Webpack.config.js file:

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devtool: "cheap-eval-source-map",
    entry: path.join(__dirname, 'src', 'App.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(__dirname, 'src')
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        inline: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html'),
            hash: true,
        })
    ]
}

Index.js file:

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

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

App.js file:

import React from 'react';

export default class App extends React.Component {
    render() {
        return (
            <div className="container">
                <h1>React Starter App</h1>
            </div>
        );
    }
}

The thing is if I change App.js to:

alert("test");

It will display the alert on the page.

Answer 1

In your webpack.config.js , change your entry point to index.js instead of App.js since index.js handles your initial rendering:

// webpack.config.js      
entry: path.join(__dirname, 'src', 'index.js');

The alert in App.js was being displayed because App.js was still getting bundled. However, it wasn't being rendered as the render logic in index.js wasn't being bundled and executed by webpack.