webpack 中 clean-weabpack-plugin使用方法

最新推荐文章于 2023-07-12 10:23:32 发布
最新推荐文章于 2023-07-12 10:23:32 发布
阅读量401 收藏
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyjourney/article/details/89181820
版权

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

但是要注意版本号，因为版本号不同，传参数的方式也不同

若版本号是2.0.0 ：

   plugins: [
      new CleanWebpackPlugin()  // 这里是不用传参数的
    ],

若版本号是2.0.1:

  plugins: [
    new CleanWebpackPlugin({})  //注意这里的使用格式
  ],
yyrSun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
clean-webpack-plugin：一个Webpack插件，用于在构建之前删除您的构建文件夹
02-06
清洁webpack插件 一个webpack插件，用于删除/清理您的构建文件夹。 注意：支持并测试了节点v8 +和webpack v3 +。 关于 默认情况下，此插件将在每次成功重建后删除webpack的output.path目录中的所有文件，以及所有未使用的webpack资产。 来自v1 ？ 请阅读有关。 安装 npm install --save-dev clean-webpack-plugin 用法 const { CleanWebpackPlugin } = require ( 'clean-webpack-plugin' ) ; const webpackConfig = {
clean-webpack-plugin
bus_lupe的博客
02-16 505
Options and Defaults (Optional) new CleanWebpackPlugin({ // Simulate the removal of files // 模拟删除文件 // // default: false dry: true, // Write Logs to Console // 将日志写入控制台 // (Always enabled when dry is true) // 当dry 为真时始
webpack打包报错：clean-webpack-plugin 3.0.0
ZTJ_123的博客
03-02 872
webpack打包报错: clean-webpack-plugin 3.0.0引用使用 引用 可能版本迭代原因 网上找到两种引用方式： 一（我用的3.0.0，正确）： const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 二（网上查的，3.0.0版本报错）： const CleanWebpackPlugin = re...
webpack的clean-webpack-plugin
qq_43661347的博客
02-01 164
1.clean-webpack-plugin webpack每次打包都会生成一个dist文件，默认本次打包不会清除上次打包的dist文件； clean-webpack-plugin 插件 就是这样由来的 每次生成代码之前 先将 dist 目录 清空； 安装： npm i clean-webpack-plugin -D 引入： const {CleanWebpackPlugin} = require(‘clean-webpack-plugin’) 插件配置：plugins里 new CleanWebpackP
webpack-upload-plugin:Webpack插件
05-13
webpack-upload-plugin介绍这是的插件。 主要目的是提供一个工具，用于将html（或其他语言的模板）中使用的js / css / img / font上传到cdn，然后将引用替换为相应的cdn url。环境要求节点> = 10.5.0安装npm i -D ...
详解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(__...
html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件
02-06
html-webpack-externals-plugin :police_car_light: 已淘汰 :police_car_light: 抱歉，该模块已不再维护，其功能已由jharris4， 和。 您可能会遇到问题，并且最近的Webpack项目尚未使用它。 与一起使用以使用...
webpack-parallel-uglify-plugin：更快的uglifyjs插件
02-06
webpack-并行-uglify-插件 该插件可帮助具有多个入口点的项目加快其... import ParallelUglifyPlugin from 'webpack-parallel-uglify-plugin' ; module . exports = { plugins : [ new ParallelUglifyPlugin ( { //
html-webpack-inject-attributes-plugin:使用html-webpack-plugin向标签添加ext属性的简单而强大的方法
05-06
请在html-webpack-plugin之后使用它，尤其是在webpack2 +中。 添加到所有注入标签，在所有html中均有效 plugins = [ new HtmlWebpackPlugin ( ) , new htmlWebpackInjectAttributesPlugin ( { inject : "true" ,...
webpack插件clean-webpack-plugin
星环
08-22 2338
webpack 插件 clean-webpack-plugin 清空指定文件夹， 排除文件， 不删除
【webpack】webpack插件 clean-webpack-plugin
不忘初心，坚定道路！
09-23 771
作用 由于修改代码导致最后生产的文件会不同，所以需要每次生成文件前清空dist目录，这样防止无用文件越来越多或者避免手动清除。 使用 安装：npm i clean-webpack-plugin -D 进行配置,用法很简单，直接导入再new即可。 const {CleanWebpackPlugin}=require('clean-webpack-plugin'); plugins...
Webpack5 CleanWebpackPlugin
最新发布
有趣的小良的博客
07-12 1735
clean-webpack-plugin是webpack的一个小插件，由于每次打包的时候有可能文件名称和文件内容不一样，打包后的文件就叠加到输出目录下了。所以cleanWebPackPlugin作用就是在每次打包之前，先把输出目录删掉，创建最新的目录，避免一些不必要的文件还留在同一个目录下~
webpack中使用clean-webpack-plugin
Keep on moving!
04-20 6353
webpack中使用clean-webpack-plugin 由于过去的指南和代码示例遗留下来，导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。 通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。 clean-webp...
九：clean-webpack-plugin
qq_24892029的博客
09-16 261
clean-webpack-plugin 打开 js 文件夹，会发现，这里有两个 app.js 文件，只是 hash 值不同而已，打开 dist/index.html 文件，发现其引用了其中的一个，也就是说，另一个是完全没用的，当我们修改入口文件的 js 代码，再次执行 npm run build 时，会发现 js 文件夹又会生成新的 app.js 文件，我们只需要被引用的那一个，其他的我们都需要删除它，这里需要用到 clean-webpack-plugin 1：安装插件 npm i cle...
清理文件管理插件clean-webpack-plugin
xigua3188的博客
01-06 235
报错： TypeError: CleanWebpackPlugin is not a constructor 解决办法： 1. 把constCleanWebpackPlugin=require('clean-webpack-plugin'); 改为 const{CleanWebpackPlugin}=require('clean-webpack-plugin'); 2. plugins:[ newCleanWebpackPlugin(['dist'...
clean-webpack-plugin使用
qq_34507902的博客
02-28 2056
为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件 运行如下的命令，即可在项目中安装 clean-webpack-plugin插件： npm install clean-webpack-plugin -D webpack3.X需要下载指定版本的插件： npm install --save-dev clean-webpack-plugin@3.0.0 "clean-webpack-plugin": "^3.0.0"...
demo17 clean-webpack-plugin (清除模式)
weixin_34268169的博客
05-25 351
1.为什么需要自动清除 dist 文件夹 在之前的 demo 中，webpack 打包后会在根目录下自动创建 dist 目录，并且把生成的文件输出到 dist 下。 当配置的输出包名含有 [hash] 时，hash值会随着文件内容的改变而改变。 因此，我们需要在下一次 webpack 打包输出之前，把 dist 目录清空。 clean-webpack-plugin 插件就能帮你做到。 2.clea...
webpack plugin源码解析(一) clean-webpack-plugin
weixin_43294560的博客
04-11 428
【代码】webpack plugin源码解析(一) clean-webpack-plugin。
webpack-circular-dependency-plugin webpack5 使用
05-24
Webpack 5 内置了对循环依赖的支持，因此不再需要使用 `webpack-circular-dependency-plugin` 插件。 如果你使用的是 Webpack 4，可以安装该插件并在 webpack.config.js 中进行配置： ```javascript const CircularDependencyPlugin = require('webpack-circular-dependency-plugin'); module.exports = { // ... plugins: [ new CircularDependencyPlugin({ // exclude detection of files based on a RegExp exclude: /node_modules/, // add errors to webpack instead of warnings failOnError: true, // set the current working directory for displaying module paths cwd: process.cwd(), }), ], }; ``` 其中，`exclude` 选项可以用来排除检测循环依赖的文件，`failOnError` 选项可以将循环依赖检测的警告转换成错误，`cwd` 选项可以设置当前工作目录以显示模块路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值