Webpack 4 学习11（用clean-webpack-plugin来清除文件）

最新推荐文章于 2024-03-01 15:17:11 发布
最新推荐文章于 2024-03-01 15:17:11 发布
阅读量270 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： webpack ViewUI
原文链接：http://www.cnblogs.com/hunterxing/p/10425303.html
本文介绍如何通过clean-webpack-plugin解决每次打包后旧文件累积的问题。首先安装clean-webpack-plugin，然后在webpack.config.js中引入并配置插件，最后运行打包命令即可实现自动清理旧文件。

当我们修改带hash的文件并进行打包时，每打包一次就会生成一个新的文件，而旧的文件并没有删除。为了解决这种情况，我们可以使用clean-webpack-plugin在打包之前将文件先清除，之后再打包出最新的文件

  • 下载插件依赖

    npm install --save-dev clean-webpack-plugin

  • 配置webpack.config.js

    • 头部引入插件

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

    • 在plugins模块引入

       new CleanWebpackPlugin(['build'])

  • 运行打包命令

    webpack --mode development

    20190223132404.png

转载于:https://www.cnblogs.com/hunterxing/p/10425303.html

webpack4.x - 7 clean-webpack-plugin的使用
wltsysterm的博客
07-21 253
背景 前面已经讲解了怎么打包html/js/css/scss的打包技巧了，这篇文章针对之前的工作出现的问题做善后工作。先讲下之前这样处理会出现什么问题吧。 手下，通常我们会给打包生成的js文件做如下的命名操作： 修改webpack.config.js文件的配置： const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { devServer:{ contentBase: __dirn
webpack 4之clean-webpack-plugin插件实现重新打包前自动清空dist文件夹
H_xiang_xiang的博客
06-21 425
我试用的webpack版本是 “webpack”: “^5.38.1”,，webpack 4之后有很多东西用法发生了变化，现查现用把。 下载插件： npm install -D clean-webpack-plugin webpack生产环境配置 // webpack.publish.config.js const {CleanWebpackPlugin} = require('clean-webpack-plugin') module.exports = { ... plugin
remove-files-webpack-plugin:Webpack插件，可在编译前后删除文件和文件夹
05-17
删除Webpack的文件夹和文件 Webpack插件，可在编译前后删除文件和文件夹。 内容 贡献 执照 安装 使用npm ： npm install remove - files - webpack - plugin 带yarn ： yarn add remove - files - webpack - plugin 支持 该插件可在任何操作系统和Webpack> = 2.2.0上运行。 用法 const RemovePlugin = require ( 'remove-files-webpack-plugin' ) ; module . exports = { plugins : [ new RemovePlugin ( { before : { // parameters for "bef
前端webpack项目如何删除文件中的无用文件
qq_52181663的博客
02-27 1001
四、在和插件同目录下自动生成了一个.txt文件。文件中有全部文件、依赖文件。可参考检查后手动删除，也可以在chainWebpack文件中修改配置isDelete:ture。这样，在项目成功跑起来的同时，就会自动删除无用文件，并且在命令行页面有删除记录。在开发过程中，总是会有一些无用的代码文件，这会影响开发小伙伴的开发效率，那么如何优化，删除这些无影=用代码呢。二、在webpack的配置文件中引入这个插件。若是umi的项目，就是在config/chainWebpack.ts文件中进行配置。
webpack 生产环境清空打包文件
Holly1945的博客
01-10 667
output.clean v5.20.0+ boolean { dry?: boolean, keep?: RegExp | string | ((filename: string) => boolean) } module.exports = { ..., output: { clean: { dry: true } } } dry: true, // 打印而不是删除应该移除的静态资源 keep: /ignored\/dir\//, // 保留 'ignored/d
webpack打包报错：clean-webpack-plugin 3.0.0
ZTJ_123的博客
03-02 953
webpack打包报错: clean-webpack-plugin 3.0.0引用使用 引用 可能版本迭代原因 网上找到两种引用方式： 一（我用的3.0.0，正确）： const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 二（网上查的，3.0.0版本报错）： const CleanWebpackPlugin = re...
webpack6 js处理打包（1）eslint配置
jieweiwujie的博客
09-27 294
js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理。
详解webpack的clean-webpack-plugin插件报错
01-18
const CleanWebpackPlugin = require('clean-webpack-plugin') // const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { entry: './input.js', output: { path: path.resolve(__...
clean-webpack-plugin：一个Webpack插件，用于在构建之前删除您的构建文件夹
02-06
默认情况下，此插件将在每次成功重建后删除webpack的output.path目录中的所有文件，以及所有未使用的webpack资产。 来自v1 ？ 请阅读有关。 安装 npm install --save-dev clean-webpack-plugin 用法 const { ...
前端开源库-webpack-auto-clean-build-plugin
08-30
使用 `webpack-auto-clean-build-plugin` 很简单，只需要将其添加到 Webpack 配置文件的 `plugins` 数组中，并配置相关的选项，如设置要清理的文件类型或者排除某些文件。这样，每次执行 `webpack` 命令时，插件就会...
初探webpack之编写plugin
WindRunnerMax
10-06 381
初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活，以适应各种应用场景，当然也大大增加了webpack的复杂性，在webpack运行的生命周期中会广播出许多事件，plugin可以hook这些事件，在合适的时机通过webpack提供的API改变其在处理过程中的输出结果。 描述 webpack是一个现代JavaScript应用程序的静态模块打包器module bundler，当webpack处理应用程序时，它会递归地构建一个依赖关系图dependency graph，其中包
webpack学习（二）：clean-webpack-plugin插件和source map功能
小五的博客
12-20 1065
clean-webpack-plugin插件 what？ clean-webpack-plugin插件：一个webpack插件，用于在构建之前删除/清除构建文件夹。也就是说我们在安装使用这个插件之后，我们每次run build会自动帮我们清除之前的文件，再用打包生成的新的文件代替 why？ 可能有人会说，每次打包完的文件如果同名不是会覆盖吗？那这个插件到底有什么意义？ 的确如此，我们只要定好文件的...
webpack：详解CopyWebpackPlugin，复制的同时修改文件内容
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
09-16 5768
CopyWebpackPlugin 是一个强大的 Webpack 插件，用于将文件从源目录复制到构建目录。在本文中，我们将探讨 CopyWebpackPlugin 的一些常用 API，并提供示例代码。在构建 Web 应用程序时，通常需要将一些静态文件（如 HTML、CSS、图片等）从源目录复制到构建目录。为了实现这一功能，我们可以使用 CopyWebpackPlugin。这个插件可以将源文件复制到构建目录，并且可以自定义复制行为。
webpack4配置之——12：CleanWebpackPlugin
kevin的博客
03-21 2718
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里 clean-webpack-plugin 在上一章我们把 css 单独抽离出来，但是打开 js 文件夹，会发现，这里有两个 app.js 文件，只是 hash 值不同而已，打开 dist/index.html 文件，发现其引用了其中的一个，也就是说，另一个是完全没用的，当我们修改入口文件的 js 代码，再次执行 npm run bu...
前端优化，webpack打包删除无用文件，并附上批量删除文件脚本！非常好用
weixin_45137175的博客
03-09 2448
大家可能在webpack打包项目过程中，常遇见一些无用的图片，js文件，怎样能够自动检测哪些是无用的文件呢？本文中介绍使用插件useless-files-webpack-plugin查找无用文件，在terminal中删除，附加bat批量删除文件。
优化Webpack打包流程：打包完成后再删除旧文件，确保网站访问稳定
ymzhao
07-03 3135
假设webpack打包耗时三分钟，在这三分钟内，网站都是无法访问的。生产环境下，影响太大。 在生产环境下，为了确保网站的稳定性和一致性，通常建议在打包完成后再部署新的打包文件，以确保网站始终可访问。因此，想到一个手动操作文件系统的方案: 将项目打包到临时文件夹下，完毕后，删除原dist文件夹，再将临时文件夹重命名为dist。
前端优化，webpack打包删除无用文件 并批量删除文件脚本
最新发布
m0_45857808的博客
03-01 466
前端优化 webpack打包时删除无用文件 并批量删除文件脚本
使用webpack-如何清理无用源文件
Thinking Code
10-15 2173
项目随着时间的推移不断更新迭代，或者新项目从老项目迁移开发，项目变得越来越臃肿，无形中就存在了很多无用的文件. 大型的项目，如果仅靠人肉去识别，难度相当大，那么怎样能够自动检测哪些是无用的文件呢？
webpack4中clean-webpack-plugin插件的使用
业余前端的职业经历
02-29 2835
这个插件是用来 帮我们清除 打包之后 dist 目录下的其他多余或者无用的代码 因为我们之前可能生成过其他的 代码 如果不清楚的话 可能 多个代码掺杂在一起 容易把我们搞混乱了 clean-webpack-plugin 插件 就是这样由来的 每次生成代码之前 先将 dist 目录 清空 下面就说下 它的使用吧 1.安装 npm i clean-webpack-plugin -D 2.引入 con...
Webpack高效构建插件：clean-webpack-plugin使用指南
在项目中使用CleanWebpackPlugin时，开发者应该意识到，如果输出目录中有些文件是确实需要保留的（例如版本记录文件、编译后的静态资源等），则需要在Webpack配置中明确指定，或者通过CleanWebpackPlugin的配置排除...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值