在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. A1094. The Largest Generation

    A family hierarchy is usually presented by a pedigree tree where all the nodes on the same level bel ...

  2. MVC之 自定义过滤器(ActionFilterAttribute)

    一.自定义Filter 自定义Filter需要继承ActionFilterAttribute抽象类,重写其中需要的方法,来看下ActionFilterAttribute类的方法签名. //表示所有操作 ...

  3. Django(十六)Form组件扩展

    http://www.cnblogs.com/wupeiqi/articles/6144178.html Form组件 - form表单(验证:保留上次内容) - - Ajax(验证:无需上次内容) ...

  4. JS with

    <script type="text/javascript"> function Dog(){ this.type="dog"; this.tail ...

  5. Lucene的其他搜索(三)

    生成索引: package com.wp.search; import java.nio.file.Paths; import org.apache.lucene.analysis.Analyzer; ...

  6. mac上安装虚拟机

    1.Mac | 怎么安装虚拟机 2.Mac | 怎么安装VMware Fusion虚拟机 资源下载链接: 1.win7旗舰版-64位.iso 2.VMFusion811.rar

  7. centos7下安装pip以及mysql等软件

    1.安装pip 安装失败了的提示: No package pip available.Error: Nothing to do 解决方法: 需要先安装扩展源EPEL. EPEL(http://fedo ...

  8. 2017-12-18python全栈9期第三天第一节之昨天内容回顾与作业讲解用户三次机会再试试

    #!/user/bin/python# -*- coding:utf-8 -*-username = "zd"password = "123"i = 3whil ...

  9. 决策树decision tree原理介绍_python sklearn建模_乳腺癌细胞分类器(推荐AAA)

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  10. Ruby页面,循环赋值方法(类似java EL表达式赋值)

    ------------前台代码--------------- <% @form_hash.each_with_index do |f,index| %> <% item = f[: ...