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

Question

当我运行 webpack-dev-server（命令："webpack-dev-server --mode development --open --progress --hot"）时，我的 bundle 被注入到 html 页面，但没有呈现任何内容。

Webpack.config.js 文件:

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 文件:

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

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

App.js 文件:

从 'react' 导入 React；

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

如果我将 App.js 更改为：

alert("test");

它将在页面上显示警报。

Answer 1

在您的 webpack.config.js 中，将您的入口点更改为 index.js 而不是 App.js，因为 index.js 处理您的初始渲染：

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

正在显示 App.js 中的警报，因为 App.js 仍在捆绑。但是，它没有被渲染，因为 index.js 中的渲染逻辑没有被 webpack 打包和执行。

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

Webpack-dev-server injects bundle in HTML page, but nothing is rendered

javascript

reactjs

webpack

webpack-dev-server