详解webpack的clean-webpack-plugin插件报错

1、出错代码

const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
// const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
 entry: './input.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'output.bundle.js'
 },
 mode: 'development',
 plugins: [
  new CleanWebpackPlugin()
 ],
 module: {
  rules: [
   {
    test: /\.(png|jpg|gif)$/i,
    use: [
     {
      loader: 'url-loader',
      options: {
       // limit: 8192 // 说明小于8192字节也就是8k才会执行
       limit: 919200
      }
     }
    ]
   }
  ]
 }
}

2、错误描述

[webpack-cli] TypeError: CleanWebpackPlugin is not a constructor

3、出错原因

导入插件语句有误，以及使用有误

4、解决

应改为如下导入语句：

  const { CleanWebpackPlugin } = require('clean-webpack-plugin')

  // es modules
  import { CleanWebpackPlugin} from 'clean-webpack-plugin';

而在使用时也是，如果都是默认清空dist文件下下的内容的话，默认不需要写参数。

和默认删除目录不同时才需要传入路径，且需要通过选项`cleanOnceBeforeBuildPatterns`来传入。

参考 【clean-webpack-plugin】

到此这篇关于详解webpack的clean-webpack-plugin插件报错的文章就介绍到这了,更多相关webpack clean-webpack-plugin插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 解决uglifyjs-webpack-plugin打包出现报错的问题

    楼主最新对已做项目进行打包优化,配置了打包环境下去除console.log语句插件---使用uglifyjs-webpack-plugin 具体代码如下 npm install uglifyjs-webpack-plugin -D const UglifyJsPlugin = require('uglifyjs-webpack-plugin') configureWebpack: config => { if (isProduction) { config.plugins = config.pl

  • 详解vue-cli项目在IE浏览器打开报错解决方法

    详解vue-cli项目在IE浏览器打开报错解决方法

    首先要知道VUE官网已表明仅支持IE8以上版本(不包括IE8),css弹性布局flex各浏览器支持如下: 假如项目用到弹性布局,则项目仅支持IE10以上版本. 另外兼容其他低版本的,请另寻它法. 网上说的本人试了都是没用的,下面是亲自试验的解决方法. 1. 问题 :ie浏览器打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser; 解决方法: 安装babel-polyfill npm install babel-po

  • 详解iOS14 Widget 开发相关及易报错地方处理

    首先了解下如何创建 Xcode -> File -> New -> Target 找到 Widget Extension 如果你的 Widget 支持用户配置属性,则需要勾选这个(例如天气组件,用户可以选择城市),不支持的话则不用勾选 了解下创建Widget后,系统给我们生成的文件内容 下面这个代码是没有勾选 Include Configuration Intent 的地方 Provider // Provider,顾名思义为小组件提供信息得一个struct struct Provide

  • 详解Vue iview IE浏览器不兼容报错（Iview Bable polyfill）

    由于Iview编译使用到了es6的一些新特性,Internet Explorer所有版本中都会报错,缺少includes.findIxdex等问题. 本人研究涉及到的环境:VueCli3.2 + iview 3.1.5 在IE中不支持ES6的新特性,例如:includes.findIndex-- 以下方案可以解决该问题: 1.  Github iview仓储Issues中提到的 改编译范围请用 transpileDependencies: ['iview'],不要用 include.add,因为

  • 详解mysql8.0创建用户授予权限报错解决方法

    问题一: 会报错的写法: GRANT ALL PRIVILEGES ON *.*  'root'@'%' identified by '123123' WITH GRANT OPTION; 以下是正确的写法: grant all privileges on *.* to 'root'@'%' ; 可见,在授权的语句中需要去掉 IDENTIFIED BY 'password'; 单独授予某种权限的写法: GRANT SELECT ON oilsystem.input TO 'u5'@'localh

  • 详解docker中使用systemctl启动服务报错的解决办法

    docker版本: [root@localhost gae_proxy]# docker version Client: Version: 1.10.3 API version: 1.22 Package version: docker-common-1.10.3-46.el7.centos.10.x86_64 Go version: go1.6.3 Git commit: d381c64-unsupported Built: Thu Aug 4 13:21:17 2016 OS/Arch: l

  • 详解SpringBoot注册Windows服务和启动报错的原因

    Windows系统启动Java程序会弹出黑窗口.黑窗口有几点不好.首先它不美观:其次容易误点导致程序关闭:但最让我匪夷所思的是:将鼠标光标选中黑窗口日志信息,程序竟然不会继续执行,日志也不会继续输出.从而导致页面一直处于请求状态.回车后程序才能正常执行.同时客户希望我们能部署在Windows系统上并且做到开机自动启动.针对以上需求将系统程序注册成Windows服务变得尤为重要. 针对于SpringBoot程序,目前主流的方法是采用winsw,简单方便.可是在开发过程中,针对不同的系统,启动服务可

  • 详解webpack的clean-webpack-plugin插件报错

    1.出错代码 const path = require('path') const CleanWebpackPlugin = require('clean-webpack-plugin') // const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { entry: './input.js', output: { path: path.resolve(__dirname, 'dist'),

  • 详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程

    第一步: 打包开始之前删除'./dist'目录 rimraf('./dist', () => { constprodConfig = require('../../lib/webpack.prod') webpack(prodConfig, (err, stats) \=> { if (err) { console.log(err) process.exit(2) } console.log(stats.toString({ color:true, modules:false, childre

  • 详解MybatisPlus3.4版本之后分页插件的使用

    目录 一.MybatisPlusInterceptor 二.旧版分页插件配置方法(Mybatis Plus 3.4.0版本之前) 三.新的分页插件配置方法(Mybatis Plus 3.4.0版本及其之后的版本) 四.分页查询的使用方法 一.MybatisPlusInterceptor 从Mybatis Plus 3.4.0版本开始,不再使用旧版本的PaginationInterceptor ,而是使用MybatisPlusInterceptor. MybatisPlusInterceptor是

  • 解决常见的Eclipse SVN插件报错方法详解

    在学习SVN的过程中,你经常会遇到SVN插件问题,本文介绍一下在安装SVN插件时常见Eclipse SVN插件报错信息问题,希望本文介绍对你的学习有所帮助. AD: 本节和大家一起看一下SVN插件在安装过程中遇到的常见Eclipse SVN插件报错信息,和大家一起分享一下,希望通过本节的介绍大家知道当出现SVN插件报错时该如何处理. 常见Eclipse SVN插件报错信息: 1.update-rHEADD:/dev/workforceWorkingcopynotlocked;thisisprob

随机推荐