Question

当我运行webpack-dev-server（命令：“ webpack-dev-server --mode development --open --progress --hot”）时，我的捆绑软件被注入到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页面中注入包，但未呈现任何内容

1 个答案: