轉自 (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> <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&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>，打包的時候報異常提示：</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修改版本號 "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。</p>
<p>重新打包，問題解決。</p>
<p><strong>后記：</strong></p>
<p>關於為什么要把插件的版本降低，系高版本要求的<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>。</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> </p>
</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>