Failed to load ‘D:\note\笔记\javaweb\webpack\webpack.config.js‘ config

The problem with configuring the plug-in html-webpack-plugin is because

 In plugins, htmlplugin is missing an n.

Another situation is this

const path = require('path')
    // 1.导入插件，得到构造函数
const HtmlPlugin = require('html-webpack-plugin')
    // 2. 创建插件的实例对象
const HtmlPlugin = new HtmlPlugin({
    template: './src/index.html',
    filename: './index.html',
})


module.exports = {
    mode: 'development',
    //打包入口文件的路径
    entry: path.join(__dirname, './src/index.js'),
    output: {
        //输出文件的存放路径
        path: path.join(__dirname, './dist'),
        // 输出文件的名称
        filename: 'bundle.js',
    },
    // 挂载插件的实例对象
    plugins: [HtmlPlugin]
}

 The two names are the same, which leads to unrecognizability. The solution is to change one of the two names, but the plugins below must be the same as the instance objects above.

The sample code is as follows:

const path = require('path')
    // 1.导入插件，得到构造函数
const HtmlPlugin = require('html-webpack-plugin')
    // 2. 创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',
    filename: './index.html',
})


module.exports = {
    mode: 'development',
    //打包入口文件的路径
    entry: path.join(__dirname, './src/index.js'),
    output: {
        //输出文件的存放路径
        path: path.join(__dirname, './dist'),
        // 输出文件的名称
        filename: 'bundle.js',
    },
    // 挂载插件的实例对象
    plugins: [htmlPlugin]
}