webpack HtmlWebpackPlugin 不是构造函数？

Question

package.json

   {
      "name": "test2",
      "version": "1.0.0",
      "description": "",
      "main": "webpack.config.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "html-webpack-plugin": "^4.5.0",
        "webpack": "^5.1.3",
        "webpack-cli": "^4.1.0"
      }
    }

webpack.config.js

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

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
 
    plugins: [
        new HtmlWebpackPlugin({template: './src/webpack.html'})
    ],
    mode: 'development'
};

我的错误：

[webpack-cli] TypeError: HtmlWebpackPlugin is not a constructor
    at Object.<anonymous> (D:\webpack workspace\test2\webpack.config.js:16:9)
    at Module._compile (D:\webpack workspace\test2\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (D:\webpack workspace\test2\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at requireConfig (D:\webpack workspace\test2\node_modules\webpack-cli\lib\groups\ConfigGroup.js:73:18)
    at Array.map (<anonymous>)

我很好奇为什么会出现错误消息“HtmlWebpackPlugin 不是构造函数！”为什么？
我很好奇为什么会出现错误消息“HtmlWebpackPlugin 不是构造函数！”为什么？
我很好奇为什么会出现错误消息“HtmlWebpackPlugin 不是构造函数！”为什么？

Answer 1

不应该是这样吗

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

Answer 2

Rowan Freeman 的 2020 年答案对我不起作用；现在是 2024 年 12 月，我正在 RsPack 上使用当前的 html-webpack-plugin 5.6.0（它支持 webpack5 的几乎所有 api，所以我认为这个答案也适用于 webpack5）。我还使用 RsPack .mjs 脚本来调用 RsPack JS api，而不是 .js，因此我需要使用

mHtmlWebpackPlugin = await import("html-webpack-plugin")

而不是

require

。

有效的方法是使用

.default

调用插件，如下所示：

plugins: [
             new mHtmlWebpackPlugin.default({
                 template: "template.html"
             })
         ]

我通过以下方式发现了这一点：

1. 仅添加您想要尝试的导入，而不是任何调用
2. 在导入后放置一个断点，例如插入

   debugger;

3. 在调试模式下运行构建脚本（我使用 VSCode），当到达断点时，检查导入内容的结构。

请注意，您不必为导入命名

mHtmlWebpackPlugin

；您可以去掉开头的

m

或将其命名为您想要的任何名称。