vue-cli webpack打包开启Gzip 报错—— Cannot find module 'compression-webpack-plugin
异常描述:
复用以前框架,打包的时候报异常提示:
Cannot find module 'compression-webpack-plugin"
然后安装插件:
npm install --save-dev compression-webpack-plugin
重新打包,又报异常如下:
ValiDationError: Compression Plugin Invalid Options

解决问题:
经查证,系插件版本问题导致。目前这个插件版本已经到3.0.0,但是网上普遍给出的可用版本是 v1.1.12,那么先解决问题,安装低版本插件:
npm install --save-dev compression-webpack-plugin@1.1.
或者在packagejson修改版本号 "compression-webpack-plugin": "1.1.12" 直接npm install。
重新打包,问题解决。
后记:
关于为什么要把插件的版本降低,系高版本要求的node版本比较高(大部分人用的node版本都没这么高,所以就会有不少人遇到这个问题了)。详见官网:https://www.npmjs.com/package/compression-webpack-plugin。


如上,2.0版本已经需要v6.9的node以及v4.0的webpack,查看下了项目的配置:


怪不得,webpack版本太低了。那么提升下webpack版本,再将压缩插件的版本恢复到最新试试:


安装插件,重新打包,报错了:

看了下webpack的官方介绍,貌似4.0版本改动较大,应该是用法上也有很大改动吧,暂且继续使用低版本的吧,有时间再研究。
vue-cli webpack打包开启Gzip 报错—— Cannot find module 'compression-webpack-plugin的更多相关文章
- Vue -- vue-cli webpack打包开启Gzip 报错
前两天项目上线,用vue-cli npm run build命令打包,打包完成后我擦吓了一跳,15M.本来暂时不打算优化的,但是每次看着部署包这么大,想想还是先优化一下,让包好看点,免得以后出现心理阴 ...
- vue 使用webpack打包后路径报错以及 alias 的使用
一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...
- webpack打包字体图标报错的解决办法
webpack打包字体图标需要两个加载器 url-loader 和 file-loader 另外 字体图标的引入方式 本来应该是 url("....") 这样的方式,但是w ...
- Vue+webpack项目中,运行报错Cannot find module 'chalk'的处理
刚开始用vue + webpack新建项目,在github上下载了一个示例,输入npm init >>>npm run dev 后报错 Cannot find module 'cha ...
- nodejs+react使用webpack打包时控制台报错
一.错误:Uncaught ReferenceError: process is not defined 解决方法: new webpack.DefinePlugin({ 'process.env': ...
- Nuxt.js vue init nuxt-community/koa-template 初始化项目报错
报错提示: Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functi ...
- PHP开启页面报错的代码
PHP开启页面报错的方法很简单,在<?php内加入下面的代码就可以了: <?php ini_set("display_errors", "On"); ...
- pyinstaller打包多个py文件仍报错ModuleNotFoundError: No module named 'xxx'
[问题现象] 使用pyinstaller A.py -p b.py -p c.py打包多个文件 或者使用main.spec在Analysis配置好各个文件打包 打包成功后,运行main.exe仍然报错 ...
- vue cli 3 打包过大问题
vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ...
随机推荐
- TCP 协议简介-阮一峰(转载)
TCP 协议简介 作者: 阮一峰 日期: 2017年6月 8日 TCP 是互联网核心协议之一,本文介绍它的基础知识. 一.TCP 协议的作用 互联网由一整套协议构成.TCP 只是其中的一层,有着自 ...
- Sql 语句中 IN 和 EXISTS 的区别
IN 语句:只执行一次 确定给定的值是否与子查询或列表中的值相匹配.in在查询的时候,首先查询子查询的表,然后将内表和外表做一个笛卡尔积,然后按照条件进行筛选.所以相对内表比较小的时候,in的速度较快 ...
- ubuntu用samba来实现和虚拟机的文件共享
1.安装samba sudo apt install -y samba sudo cp /etc/samba/smb.conf /etc/samba/smb.conf.bak 2.创建文件夹并修改权限 ...
- python笔记--------numpy
numpy.zeros() 功能:创建零矩阵 numpy.mean(a, axis, dtype, out,keepdims ) 功能:对数据求均值. 参数介绍: a:数据,一般为矩阵 axis:未设 ...
- Xmind8 Pro 最新版破解教程(序列号|破解文件|视频教程)
文字教程: (文字说明部分是为了增强教程的完整性,可以直接看视频教程部分) 一.下载XMindCrack.jar文件: 百度云(https://pan.baidu.com/s/1x5Y4FFG61MT ...
- BSGS学习笔记
用于求\(A^{x} \equiv B \pmod{C}\) 高次方程的最小正整数解x,其中C为素数 引理1:$a^{i\mod\varphi(p) } \equiv a^{i} $ (mod p) ...
- 三大框架整合(hibernate-spring-struts2)
三大框架整合说明 一.导包---41个包 二.单独配置spring容器---applicationContext.xml (1)导入约束(beans|context|aop|tx) (2)写数据库读取 ...
- 获取浏览器名称与版本checkbrowse()
function checkbrowse() { var ua = navigator.userAgent.toLowerCase(); var is = (ua.match(/\b(chrome|o ...
- Go语言 - 反射
reflect包 在Go语言的反射机制中,任何接口值都由是一个具体类型和具体类型的值两部分组成的(我们在上一篇接口的博客中有介绍相关概念). 在Go语言中反射的相关功能由内置的reflect包提供,任 ...
- 实现:python3_解析shodan_json数据
前言:今天,一美元可以开通shodan,急忙去买了一个哈哈!! 下载json格式的数据,可以通过该脚本进行解析,得到相应的ip:port的格式 示例代码: # coding=utf-8 import ...