webpack打包时提示Invalid configuration object错误

矫情吗；* 2022-05-26 05:55 413阅读 0赞

初学者如果是通过网上教程来学习webpack，第一次用webpack打包时通常会遇到下面这样的问题：  
![这里写图片描述][20180426114917117]

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

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][https_www.runoob.com_w3cnote_webpack-tutorial.html]这里的教程，在开始已经声明了所用的webpack版本：  
![这里写图片描述][20180426115845333]

检查一下我们工程里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的官网看最新的配置，比如上面的问题可以在[这里][Link 1]看到（官网的配置都没说支持loaders，硬要套3.0版本的写法这不是自寻死路？不过还是要吐槽一下为什么不能向前兼容呢）。

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

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

[20180426114917117]: /images/20220526/60b0971c1f4b459283f81fcc97a41368.png
[https_www.runoob.com_w3cnote_webpack-tutorial.html]: https://www.runoob.com/w3cnote/webpack-tutorial.html
[20180426115845333]: /images/20220526/dd50db92dedf476690c020b638210070.png
[Link 1]: https://webpack.js.org/loaders/imports-loader/#webpack-config-js
[npm]: https://blog.csdn.net/lqlqlq007/article/details/79820967