webpack4.0 clean-webpack-plugin 插件跳坑指南clean-webpack-plugin插件

clean-webpack-plugin插件是用于在下一次打包时清除之前打包的文件

按照4.35.0 API会报错：“TypeError: CleanWebpackPlugin is not a constructor”

注："clean-webpack-plugin": "^3.0.0"

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

plugins: [
    new CleanWebpackPlugin(['dist'])  
]

正确用法：

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

plugins: [    
    new CleanWebpackPlugin()  
]

那么为什么会这样呢

我们从node_modules文件夹找到clean-webpack-plugin里面的clean-webpack-plugin.d.ts文件

export { CleanWebpackPlugin };//3.0.0导出方式

export default CleanWebpackPlugin;//2.0.2导出方式
所以在2.0.2版本我们可以直接require拿到CleanWebpackPlugin 
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = CleanWebpackPlugin;//1.0.1导出方式

然后查看构造函数，可以看到Options 被定义成一个对象，所以我们的['dist']要去掉

export interface Options {}

constructor(options?: Options);

对比1.0.1 它接收一个paths参数指定要清空的文件夹

function CleanWebpackPlugin(paths, options) {    // allows for a single string entry
    if (typeof paths == 'string' || paths instanceof String) {
       paths = [paths];
    }
    this.paths = paths;
}

疑问又来了那我们怎么知道清除哪个文件夹呢

这个里面写得很清除，他会默认清空我们output里面设置的所有文件夹

https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional

By default, this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild.

这下终于明白了~