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">
<p><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"></p>
<p>&nbsp;<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"></p>
<p>-------------------------------</p>
<p><span style="color:#be191c;"><strong>下面是参考的网上的内容（看了下面这个帖子就试了一下上面的内容，问题就解决了）</strong></span></p>
<p>原文链接：<a href="https://www.cnblogs.com/xyyt/p/11384818.html">https://www.cnblogs.com/xyyt/p/11384818.html</a></p>
<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>
<p><strong>异常描述：</strong></p>
<p>复用以前<a href="https://so.csdn.net/so/search?q=%E6%A1%86%E6%9E%B6&amp;spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.7020&quot;,&quot;dest&quot;:&quot;https://so.csdn.net/so/search?q=%E6%A1%86%E6%9E%B6&amp;spm=1001.2101.3001.7020&quot;}" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.7020&quot;,&quot;dest&quot;:&quot;https://so.csdn.net/so/search?q=%E6%A1%86%E6%9E%B6&amp;spm=1001.2101.3001.7020&quot;}" data-tit="框架" data-pretit="框架">框架</a>，打包的时候报异常提示：</p>
<pre> Cannot find module 'compression-webpack-plugin"</pre>
<p>然后安装插件：</p>
<pre>npm install --save-dev compression-webpack-plugin</pre>
<p>重新打包，又报异常如下：</p>
<pre>ValiDationError: Compression Plugin Invalid Options</pre>
<p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/112a1d81e810a35dd5237a9a6b63c984.png"></p>
<p><span style="color:#1c7331;">解决问题：</span></p>
<p><span style="color:#1c7331;">经查证，系插件版本问题导致。目前这个插件版本已经到3.0.0，但是网上普遍给出的可用版本是 v1.1.12，那么先解决问题，安装低版本插件：</span></p>
<pre><span style="color:#be191c;">npm install --save-dev compression-webpack-plugin@1.1.12</span></pre>
<p>或者在packagejson修改版本号&nbsp;&nbsp;"compression-<a href="https://so.csdn.net/so/search?q=webpack&amp;spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.7020&quot;,&quot;dest&quot;:&quot;https://so.csdn.net/so/search?q=webpack&amp;spm=1001.2101.3001.7020&quot;}" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.7020&quot;,&quot;dest&quot;:&quot;https://so.csdn.net/so/search?q=webpack&amp;spm=1001.2101.3001.7020&quot;}" data-tit="webpack" data-pretit="webpack">webpack</a>-plugin": "1.1.12"&nbsp; &nbsp;直接npm install。</p>
<p>重新打包，问题解决。</p>
<p><strong>后记：</strong></p>
<p>关于为什么要把插件的版本降低，系高版本要求的<a href="https://so.csdn.net/so/search?q=node&amp;spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.7020&quot;,&quot;dest&quot;:&quot;https://so.csdn.net/so/search?q=node&amp;spm=1001.2101.3001.7020&quot;}" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.7020&quot;,&quot;dest&quot;:&quot;https://so.csdn.net/so/search?q=node&amp;spm=1001.2101.3001.7020&quot;}" 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>。</p>
<p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/29874851cfe7a69267805fc1565dfc3c.png"></p>
<p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/b1e1da4add41b0dc4033155ec786b317.png"></p>
<p>如上，2.0版本已经需要v6.9的node以及v4.0的webpack，查看下了项目的配置：</p>
<p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/70a8ebbc17e3aaa92ec24bfea826b11e.png"></p>
<p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/f1a672cbaa39f6a12f01510fad3fd10e.png"></p>
<p>怪不得，webpack版本太低了。那么提升下webpack版本，再将压缩插件的版本恢复到最新试试：</p>
<p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/ad7ad8defbe9aedb87572b1d23e488da.png"></p>
<p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/0616bb417840d1df0a803a11e6d2baab.png"></p>
<p>安装插件，重新打包，报错了：</p>
<p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/172c5d2f46594c2bc47bea85ea707acf.png"></p>
<p>看了下webpack的官方介绍，貌似4.0版本改动较大，应该是用法上也有很大改动吧，暂且继续使用低版本的吧，有时间再研究。</p>
<p>&nbsp;</p>
</div><div data-report-view="{&quot;mod&quot;:&quot;1585297308_001&quot;,&quot;spm&quot;:&quot;1001.2101.3001.6548&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/zy103118/article/details/120036007&quot;,&quot;extend1&quot;:&quot;pc&quot;,&quot;ab&quot;:&quot;new&quot;}"><div></div></div>
</div>