在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. [CTSC2018]暴力写挂——边分树合并

    [CTSC2018]暴力写挂 题面不错 给定两棵树,两点“距离”定义为:二者深度相加,减去两棵树上的LCA的深度(深度指到根节点的距离) 求最大的距离. 解决多棵树的问题就是降维了. 经典的做法是边分 ...

  2. 初入webform的杂七杂八

    客户端---IIS(Internet Information Services的缩写,意为互联网信息服务管理器)---.NET framework---数据库 1.Repeater控件:对应的集合有5 ...

  3. cf 990G - GCD Counting

    题意 #include<bits/stdc++.h> #define t 200000 #define MAXN 200100 using namespace std; int n; in ...

  4. SRM 600 div 2 T 2

    题意:给你50个数,问你最少去掉多少数能使得剩下的数不可能具备子集S,OR起来为goal 如果一个数不是goal的子状态,那么我们没必要删除他,所以我们只关心goal的子状态的数 1:如果所有的数OR ...

  5. 洛谷 P1393 P3157 动态逆序对

    嘛,好久没碰CDQ分治了,做道题练练手. 时间倒流——把删数改为加数. 对于每个被删的,我的想法是拆成询问和add,后来发现一个足矣. 我本来准备对每个删的数都求一遍整体逆序对,后来发现无论如何都不可 ...

  6. pandas中遍历dataframe的每一个元素

    假如有一个需求场景需要遍历一个csv或excel中的每一个元素,判断这个元素是否含有某个关键字 那么可以用python的pandas库来实现. 方法一: pandas的dataframe有一个很好用的 ...

  7. Java Scanner篇

    Scanner 翻译解释为扫描器 Java中用于控制台的的数据输入 包:import java.util.Scanner 使用方法:Scanner reader=new Scanner(System. ...

  8. 0基础如何学Android开发

    链接:http://pan.baidu.com/s/1bIEIse 密码:ky7w https://pan.baidu.com/s/1i53bs6x提取码:0pwthttps://www.zhihu. ...

  9. nginx搭建分布式简单配置

    1.下载安装nginx 2.编辑nginx.conf文件 upstream 172.100.10.52 { ip_hash; #保证每一个用户访问同一个网站 server 172.100.10.21: ...

  10. (BFS) leetcode 690. Employee Importance

    690. Employee Importance Easy 377369FavoriteShare You are given a data structure of employee informa ...