引入clean-webpack-plugin重新打包自动删除上次打包的文件以及报错

引入clean-webpack-plugin重新打包自动删除上次打包的文件以及报错

webpack版本

webpack版本:4.x.x

下载clean-webpack-plugin插件

npm install --save-dev clean-webpack-plugin
const path=require("path");
//重新打包自动删除上次打包的文件
const { CleanWebpackPlugin }=require("clean-webpack-plugin");

module.exports = {
	mode:"development",
	entry:{
		'index':'./src/js/index.js'
	},
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'js/[name].js'
	},
	module:{
		rules:[
			{
				test:'/\.css$/',
				use:[
					{
						loader:'style-loader',
					},
					{
					    loader: 'css-loader',
					    options: {
					        modules: true
					    }
					}
				]
			},{
				test:'/\.js$/',
				use:[
					{
						loader:'babel-loader',
						options:{
							presets:['@babel/preset-dev']
						}
					}
				],
				exclude:'/node_module/' // 排除在外
			}
		]
	},
	plugins:[
		new CleanWebpackPlugin(),
	]
}

第一次报错 :CleanWebpackPlugin is not a constructor

在这里插入图片描述
我的错误写法

//重新打包自动删除上次打包的文件
const CleanWebpackPlugin =require("clean-webpack-plugin");
在Vue项目中安装`compression-webpack-plugin`插件后,可能会遇到打包报错的情况。`compression-webpack-plugin`是一个用于压缩Webpack构建产出的静态资源(如CSS、JS)的插件,但在添加它之前需要确认几个步骤: 1. **兼容性检查**:确保你的webpack版本支持该插件,因为某些版本可能存在不兼容。 2. **正确配置**:在你的webpack配置文件(`config/index.js` 或 `vue.config.js`) 中,你需要正确地应用这个插件。通常会把它添加到output部分,并设置合适的压缩选项,例如`algorithm`, `test`等。 ```js const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { //... optimization: { minimizer: [ new CompressionWebpackPlugin({ algorithm: 'gzip', // 压缩算法,默认为gzip test: /\.js$|\.html$|\.css$/, // 指定要压缩的文件类型 threshold: 10240, // 文件大小阈值,低于此值时不压缩 minRatio: 0.8, // 压缩比率低于此值时不压缩 }), ], }, }; ``` 3. **处理错误**:如果打包过程中报错,可能是由于其他依赖冲突、语法错误或者是配置文件解析问题。检查是否有语法错误,以及是否有其他模块与`compression-webpack-plugin`有冲突。 如果你已经按照上述步骤操作但仍出现问题,具体的错误信息将是非常重要的线索。常见的错误可能包括缺少必要的模块、路径问题或是对webpack的配置理解有误。建议你在错误日志中查找关键词,或者尝试在网上搜索相似错误以找到解决方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值