webpack打包时提示Invalid configuration object错误

初学者如果是通过网上教程来学习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,不过效率就呵呵了。

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页