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