记一次vue用webpack打包时报UnhandledPromiseRejectionWarning:CssSyntaxError:Unknown word

某次在开发过程中遇到这样的一个问题：

使用的是vue框架，用webpack进行打包的时候报了这样一个错，如下图：

 

step1：将svg引用处的单引号改为双引号

一开始我直接将错误的第一行放到搜索引擎中去搜答案，很多回答都指向一个问题，就是有可能项目中引用了svg，且引用的时候是使用的单引号。我的项目刚好使用了amaze-vue插件（amazeUI基于vue生态的定制插件），里面有很多svg代码，所以我就先在node-modules中找到amaze-vue插件并全局搜索关键字‘svg’，结果还真看到了几处引用时用的是单引号，赶快将它们都改成双引号，如图：

but，再次尝试打包依旧失败，还是报刚才那个错。。。

有些小伙伴可能改了svg的引号之后就没有报错了，说明我这个错误根源不在这儿

 

step2：打印出具体错误信息

既然不是svg的问题那就仔细研究一些报错的关键词吧，主要是这三个：

UnhandledPromiseRejectionWarning

CssSyntaxError

Unknown word

 

先研究一下 UnhandledPromiseRejectionWarning，找了半天找到一个打印具体错误信息的方法，如下

process.on('unhandledRejection', (reason, p) => {
  console.log('Unhandled Rejection at: Promise', p, 'reason:', reason);
  // application specific logging, throwing an error, or other logic here
});

参考链接 How to find which promises are unhandled in Node.js UnhandledPromiseRejectionWarning?

将其添加到 build.js 中 throw err 前后某位置，再次尝试打包，发现打印出了一长串的错误信息

相当的长，我翻了好久，它是把webpack编译后的css文件整个给我输出来了，怎么看也都是告诉我该css的第111行的第6位开始有未知符号unknown word，可是这也太难看出来是哪个符号有问题了吧！

于是我只好去重点查查后面两个关键词

 

step3：缓兵之计

查了查 CssSyntaxError 和 Unknown word，确实也有很多遇到这种问题的，临时办法就是先注释掉webpack.prod.conf.js中的OptimizeCSSPlugin（其实在一开始的报错信息中就有写明是optimize-css-assets-webpack-plugin执行时出错的，当时没仔细看）

将上图那段代码注释掉之后，再打包，确实成功了

但是打包之后的css文件并没有进行压缩处理，如果项目小还好，项目稍微大点就还是不行啊，还是要压缩css

 

step4：双斜杠的锅

最后我就想着也没别的办法，再仔细看看报错信息吧，发现那一大篇信息中间夹着这么几行，就还是说我的错误出在压缩后的css文件的第111行的第6位，我就在给出的source中查看前几行，发现只要是特殊符号都进行了反斜杠转义，唯独注释符号双斜杠 '//' 很显眼的躺在那里，如图：

我突然想起来，css貌似是使用 /* */ 来注释的！

赶快将所有css文件中的 // 都替换成 /* */ ，然后再次进行打包，终于成功了！！！（老泪纵横）