Webpack 5 不会在 index.html 的 div 上注入反应代码

Question

我正在使用 react 和 webpack 5 构建一个项目。构建时，一切运行都没有错误，但没有组件插入到主索引中的父 div 中。html

我的文件 webpack.config

module.exports = (env = {}) => {
    return {
        entry: ['./src/index.js'],
        output: {
            clean: true,
            publicPath: '/',
            path: path.resolve(__dirname, 'build'),
            filename: `bundle-${Number(new Date())}.js`,
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                        },
                    },
                },
            ],
        },
        devServer: {
            hot: true,
            open: true,
            historyApiFallback: true,
            client: {
                overlay: true,
            },
        },
        plugins: [
            new HtmlWebpackPlugin({
                inject: true,
                scriptLoading: 'blocking',
                template: 'public/index.html',
                favicon: 'public/favicon.ico',
            }),
        ],
    }
}

我的文件 package.json

{
  "name": "test",
  "license": "ISC",
  "scripts": {
    "start": "webpack-dev-server --mode=development",
  },
  }
}

为什么会发生这种情况，我该如何解决？

Answer 1

您的插件似乎无法正常工作。

请调整“模板”的 position

如果您的index.html公开存在，请在template: path.resolve(__dirname, 'public/index.html')