npm错误：Cannot find module ‘compression-webpack-plugin

转自 (82条消息) 前端开发遇到Cannot find module ‘compression-webpack-plugin‘问题解决_brave_zhao的博客-CSDN博客

<div id="article_content" class="article_content clearfix">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-163de54645.css">
<div id="content_views" class="htmledit_views">
<img alt="" height="740" src="https://img-blog.csdnimg.cn/20210901112420871.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAYnJhdmVfemhhbw==,size_20,color_FFFFFF,t_70,g_se,x_16" width="1014">
 <img alt="" height="388" src="https://img-blog.csdnimg.cn/20210901112624297.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAYnJhdmVfemhhbw==,size_20,color_FFFFFF,t_70,g_se,x_16" width="1007">
-------------------------------
下面是参考的网上的内容（看了下面这个帖子就试了一下上面的内容，问题就解决了）
原文链接：<a href="https://www.cnblogs.com/xyyt/p/11384818.html">https://www.cnblogs.com/xyyt/p/11384818.html</a>
<h2><a name="t0"></a><a href="https://www.cnblogs.com/xyyt/p/11384818.html" id="cb_post_title_url">vue-cli webpack打包开启Gzip 报错—— Cannot find module 'compression-webpack-plugin</a></h2>
异常描述：
复用以前<a href="https://so.csdn.net/so/search?q=%E6%A1%86%E6%9E%B6&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%A1%86%E6%9E%B6&spm=1001.2101.3001.7020"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%A1%86%E6%9E%B6&spm=1001.2101.3001.7020"}" data-tit="框架" data-pretit="框架">框架</a>，打包的时候报异常提示：
<pre> Cannot find module 'compression-webpack-plugin"</pre>
然后安装插件：
<pre>npm install --save-dev compression-webpack-plugin</pre>
重新打包，又报异常如下：
<pre>ValiDationError: Compression Plugin Invalid Options</pre>
<img alt="" src="https://img-blog.csdnimg.cn/img_convert/112a1d81e810a35dd5237a9a6b63c984.png">
解决问题：
经查证，系插件版本问题导致。目前这个插件版本已经到3.0.0，但是网上普遍给出的可用版本是 v1.1.12，那么先解决问题，安装低版本插件：
<pre>npm install --save-dev compression-webpack-plugin@1.1.12</pre>
或者在packagejson修改版本号  "compression-<a href="https://so.csdn.net/so/search?q=webpack&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=webpack&spm=1001.2101.3001.7020"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=webpack&spm=1001.2101.3001.7020"}" data-tit="webpack" data-pretit="webpack">webpack</a>-plugin": "1.1.12"   直接npm install。
重新打包，问题解决。
后记：
关于为什么要把插件的版本降低，系高版本要求的<a href="https://so.csdn.net/so/search?q=node&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=node&spm=1001.2101.3001.7020"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=node&spm=1001.2101.3001.7020"}" data-tit="node" data-pretit="node">node</a>版本比较高（大部分人用的node版本都没这么高，所以就会有不少人遇到这个问题了）。详见官网：<a href="https://www.npmjs.com/package/compression-webpack-plugin">https://www.npmjs.com/package/compression-webpack-plugin</a>。
<img alt="" src="https://img-blog.csdnimg.cn/img_convert/29874851cfe7a69267805fc1565dfc3c.png">
<img alt="" src="https://img-blog.csdnimg.cn/img_convert/b1e1da4add41b0dc4033155ec786b317.png">
如上，2.0版本已经需要v6.9的node以及v4.0的webpack，查看下了项目的配置：
<img alt="" src="https://img-blog.csdnimg.cn/img_convert/70a8ebbc17e3aaa92ec24bfea826b11e.png">
<img alt="" src="https://img-blog.csdnimg.cn/img_convert/f1a672cbaa39f6a12f01510fad3fd10e.png">
怪不得，webpack版本太低了。那么提升下webpack版本，再将压缩插件的版本恢复到最新试试：
<img alt="" src="https://img-blog.csdnimg.cn/img_convert/ad7ad8defbe9aedb87572b1d23e488da.png">
<img alt="" src="https://img-blog.csdnimg.cn/img_convert/0616bb417840d1df0a803a11e6d2baab.png">
安装插件，重新打包，报错了：
<img alt="" src="https://img-blog.csdnimg.cn/img_convert/172c5d2f46594c2bc47bea85ea707acf.png">
看了下webpack的官方介绍，貌似4.0版本改动较大，应该是用法上也有很大改动吧，暂且继续使用低版本的吧，有时间再研究。
 
</div><div data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://blog.csdn.net/zy103118/article/details/120036007","extend1":"pc","ab":"new"}"><div></div></div>
</div>