webpack打包时提示Invalid configuration object错误

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lqlqlq007/article/details/80091899

初学者如果是通过网上教程来学习webpack，第一次用webpack打包时通常会遇到下面这样的问题：

实际上出错信息已经说明了问题原因：

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

这一段的意思是webpack.config.js错误，原因是这个配置文件的版本和我们当前安装的webpack的版本不匹配。

configuration.module has an unknown property ‘loaders’.

接下来这段我们只需要看前面一句，意思是webpack.config.js这个配置文件里的module属性有一个未知的配置项loaders，原因嘛，就是我们当前安装的webpack版本已经去掉了这个配置。

如https://www.runoob.com/w3cnote/webpack-tutorial.html这里的教程，在开始已经声明了所用的webpack版本：

检查一下我们工程里webpack的版本：

{
  "name": "angular-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.6.10",
    "css-loader": "^0.28.11",
    "style-loader": "^0.21.0",
    "webpack": "^4.6.0"
  }
}

版本是4.6.0，看来这些webpack的配置并没有做成向前兼容，下面给出两个解决方案：

一个方法是去webpack的官网看最新的配置，比如上面的问题可以在这里看到（官网的配置都没说支持loaders，硬要套3.0版本的写法这不是自寻死路？不过还是要吐槽一下为什么不能向前兼容呢）。

另一个方法就是去下载指定版本的webpack：npm如何下载指定版本插件。

当然，有时间的话页可以自己慢慢调试，比如自己在webpack.config.js里手动去掉出错信息提示的loaders，不过效率就呵呵了。