在webpack中打包的文件通常是通过hash生成的,如果文件改动,那么打包的文件就会越来越多,如果想清除之前的文件,可以使用clean-weabpack-plugin插件来处理
 
注意版本号:我使用的是

"clean-webpack-plugin": "^2.0.1",

关于配置的介绍:

webpack中添加如下代码

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
new CleanWebpackPlugin({})
}

这个插件默认会清除 output.path 输出的目录

module.exports = {
output: {
filename: '[name]_[hash].js',
path: resolve('dist')
}
}

关于常用的参数配置

1. cleanOnceBeforeBuildPatterns

这个参数配置要删除那些文件,和不要删除那些文件,不要删除的文件前面加个逻辑运算符非 ! ,*号可以通过站位符来处理,表示什么开头,什么结尾啥的

new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['main*.*', '!vendor', '!vendor.manifest.json']
}),

【webpack】中clean-weabpack-plugin使用方法的更多相关文章

  1. webpack中loader和plugin的概念理解

    对于 loader ,它就是一个转换器,将A文件进行编译形成B文件,这里操作的是文件,比如将 A.scss 或 A.less 转变成 B.css,单纯的文件转换过程: 对于 plugin,它就是一个扩 ...

  2. webpack中环境变量的使用方法

    这节课讲解一下,在webpack打包过程中,怎么去使用一些环境变量. 首先我有一个打包配置的三个文件 "scripts": { "dev-build": &qu ...

  3. 在webpack中配置vue.js

    在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...

  4. render方法渲染组件和在webpack中导入vue

    使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...

  5. webpack中clean-webpack-plugin插件使用遇到的问题及解决方法

    webpack 会生成文件,然后将这些文件放置在 /dist 文件夹中,但是 webpack 无法追踪到哪些文件是实际在项目中用到的. 通常,在每次构建前清理 /dist 文件夹,是比较推荐的做法,因 ...

  6. webpack中如何使用vue

    1.安装 vue包:npm i vue -S 2.由于在webpack中,推荐使用.vue这个组件模版文件来定义组件,不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的lo ...

  7. webpack 中导入 vue 和普通网页使用 vue 的区别(四)

    一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...

  8. 011 webpack中使用vue

    一:在webpack中使用vue 1.安装vue的包 2.index.html <!DOCTYPE html> <html lang="en"> <h ...

  9. Javascript - Vue - webpack中的组件、路由和动画

    引入vue.js 1.cnpm i vue -S 2.在mian.js中引入vue文件 import Vue from "vue"//在main.js中使用这种方式引用vue文件时 ...

  10. Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案

    文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...

随机推荐

  1. 一文看懂npm、yarn、pnpm之间的区别

    文作者对比了当前主流的包管理工具npm.yarn.pnpm之间的区别,并提出了合适的使用建议,以下为译文: NPM npm是Node.js能够如此成功的主要原因之一.npm团队做了很多的工作,以确保n ...

  2. Hibernate 基础解析(Configuration,SessionFactory,Session,Transaction,Query,Criteria)

    1       框架体系结构 对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实 现面向对象编程语言里 ...

  3. TestNg 7.依赖测试

    我本个测试方法执行的时候,依赖于其他的方法.用到关键字dependsOnmethods(依赖于那个方法)也有依赖于哪个组(dependsOnGroups). 看以下的一段代码: package com ...

  4. 计算机基础:计算机网络-chapter6应用层

    应用层为协议最顶部,为用户服务. 常见的服务:邮件,万维网,DNS等 DNS:使用UDP承载,部分使用TCP协议 作用 将域名映射为IP 域名格式:自己到上级域名的访问 DNS服务器提供域名的资源记录 ...

  5. mysql 存储过程中文乱码的解决方法

    CREATE PROCEDURE `PROC_FOOBAR`(id INTEGER) BEGIN DECLARE code, user_id VARCHAR(32) CHARACTER SET utf ...

  6. qml: 支持的基本类型

    qml支持的基本类型有: bool unsigned int, int; float    double   qreal QString QUrl QColor QData,  QTime  QDat ...

  7. C++ MFC------ 快捷键

    创建快捷键 该文讲解如何给dialog的菜单或者按钮添加快捷键. 1.局部快捷键 点击控件,右键点“属性”,在属性Caption后添加&Key,例如: &Y,即通过按Alt+Y即可触发 ...

  8. Mysql的SQL语句常用基本命令

    SQL语句分类:DDL,DML,DQL,DCL. 1.数据库操作: 创建数据库:create database 数据库名 charater set gbk; 删除数据库:drop database 数 ...

  9. python3 aes加解密

    # encoding: utf-8 import xlrd import os import yaml import logging.config from Crypto.Cipher import ...

  10. label与input之间的对应

    实现点击文字对应的框可以被选中,再点击一下文字框又取消选中 label的for属性与input的id属性值对应,即可实现.