webpack打包错误:webpack-cli configuration.output has an unknown property

Webpack：

webpack有一个插件，可以实现同时打包/(复制)index.html到达dist目录，并自动就引入所需要的.js文件，我们要做到的事情就是直接运行打包好的模板文件即可.

---

问题描述

明明没有报出语法错误却无法运行：

在 webpack.config.js 中配置 html-webpack-plugin 插件

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

 const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development", //开发模式
  entry: path.join(__dirname, "src", "app.js"), //入口文件 __dirname是根目录的意思
  output: {
    //出口文件
    path: path.join(__dirname, "dist"),
    filename: "main.js",
  },
  Plugin: [
    new HtmlWebpackPlugin({
      template: path.resolve("./index.html"),
    }),
  ],
};

---

原因分析：

一般报错看关键的第一句就好啦.

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. configuration has an unknown property 'Plugin'.

• 大概的意思是:无效的配置对象。Webpack的初始化使用了不匹配的配置对象API模式。配置有一个未知的属性“Plugin”。
• 所以我们需要去到"webpack.config.js"文件中查看一下"Plugin"这个属性,为什么没被正确配置.

---

解决方案：

经过检查发现webpack.config.js中的插件""这个属性,正确的写法为plugins,而不是Plugin(vscod自动联想的锅!),严格区分大小写.

正确代码如下:

 plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve("./index.html"),
    }),
  ],

再次运行,就可以看到成功啦!

• 因为本人是个前端的小同学,偶有犯错,故文章用来记录一些网上搜不到的问题.以备日后不时之需.
• 如果文章内容有纰漏,欢迎各位大佬指正.