React开发中HtmlWebpackPlugin模块找不到错误求助

问题根源 #

你在webpack配置的module.rules里错误地将HtmlWebpackPlugin作为处理.html文件的loader使用了——HtmlWebpackPlugin是webpack插件，不是loader，处理html文件应该用你已经安装的html-loader。

修正后的webpack配置 #

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'development',
    resolve: {
        extensions: [ '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.html$/,
                use: {
                    // 替换为正确的html-loader
                    loader: 'html-loader',
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: './index.html'
        })
    ]
}

额外验证步骤 #

• 删除node_modules文件夹和package-lock.json文件，重新执行npm install清除可能的缓存问题
• 重启webpack开发服务：npm start

内容的提问来源于stack exchange，提问作者Josue Quichca