webpack 踩坑日志 -- 关于css-loader的报错

webpack 踩坑日志

• 问题描述

  • 使用webpack对css管理的时候发生了错误
  • 引用了 css-loader
  • 引用了 style-loader

• 报错如下

(node:8904) UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function

	以下省略源文件报错位置...
	at...
	
(Use `node --trace-warnings ...` to show where the warning was created)
(node:8904) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:8904) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

• 原因分析

  • css-loader和style-loader版本过高导致报错

• 问题解决

  • 降低版本

package.json中修改,一般是在devDependencies中进行修改

 "css-loader": "^3.3.0",
 "style-loader": "^1.0.0",

然后先后命令行输入: npm install 和 npm run build
注意npm run build同样需要在package.json文件中提前设置build
如下所示

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

目前为止,package.json中所需要的代码如下所示

{
  "name": "webpack_study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.3.0",
    "style-loader": "^1.0.0",
    "webpack": "^3.6.0"
  }
}