clean-webpack-plugin源码学习，TypeError: CleanWebpackPlugin is not a constructor

本文是在学习webpack时，做一个小的项目，使用clean-webpack-plugin插件清空目标文件夹时出现的一些问题的总结

npm install clean-webpack-plugin -D

“clean-webpack-plugin”: “^3.0.0”

• npm 安装的时候，默认安装的最新版本

• webpack.config.js

const path = require('path'),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  // entry: './src/index.js',
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  plugins: [
    // "clean-webpack-plugin": "^2.0.2",
    // new CleanWebpackPlugin(),
    // 1.0.1
    // new CleanWebpackPlugin(['dist']),
    new CleanWebpackPlugin(['dist']),
    // 在dist文件夹中 自动新建index.html  并且所有的bundle会自动添加到index.html中
    new HtmlWebpackPlugin({
      title: 'output management'
    })
  ]
};

• 出现了这个问题 TypeError: CleanWebpackPlugin is not a constructor

PS E:\Practice\jslearn> npm run build

> jslearn@1.0.0 build E:\Practice\jslearn
> webpack

E:\Practice\jslearn\node_modules\webpack-cli\bin\cli.js:74
                                throw err;
                                ^

TypeError: CleanWebpackPlugin is not a constructor
    at Object.<anonymous> (E:\Practice\jslearn\webpack.config.js:20:5)
    at Module._compile (E:\Practice\jslearn\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (E:\Practice\jslearn\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (E:\Practice\jslearn\node_modules\webpack-cli\bin\utils\convert-argv.js:115:13)
    at requireConfig (E:\Practice\jslearn\node_modules\webpack-cli\bin\utils\convert-argv.js:117:6)
    at E:\Practice\jslearn\node_modules\webpack-cli\bin\utils\convert-argv.js:124:17
    at Array.forEach (<anonymous>)
    at module.exports (E:\Practice\jslearn\node_modules\webpack-cli\bin\utils\convert-argv.js:122:15)
    at yargs.parse (E:\Practice\jslearn\node_modules\webpack-cli\bin\cli.js:71:45)
    at Object.parse (E:\Practice\jslearn\node_modules\yargs\yargs.js:567:18)
    at E:\Practice\jslearn\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (E:\Practice\jslearn\node_modules\webpack-cli\bin\cli.js:375:3)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (E:\Practice\jslearn\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jslearn@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jslearn@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-05-31T07_17_10_542Z-debug.log

• 查看clean-webpack-plugin源码
  导出的是 export { CleanWebpackPlugin }
  源码

declare class CleanWebpackPlugin {
    private readonly dry;
    private readonly verbose;
    private readonly cleanStaleWebpackAssets;
    private readonly protectWebpackAssets;
    private readonly cleanAfterEveryBuildPatterns;
    private readonly cleanOnceBeforeBuildPatterns;
    private readonly dangerouslyAllowCleanPatternsOutsideProject;
    private currentAssets;
    private initialClean;
    private outputPath;
    constructor(options?: Options);
    apply(compiler: Compiler): void;
    /**
     * Initially remove files from output directory prior to build.
     *
     * Only happens once.
     *
     * Warning: It is recommended to initially clean your build directory outside of webpack to minimize unexpected behavior.
     */
    handleInitial(compilation: Compilation): void;
    handleDone(stats: Stats): void;
    removeFiles(patterns: string[]): void;
}
export { CleanWebpackPlugin };

• 所以正确的引用应该是这样

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

• 继续打包
• 出现新问题

E:\Practice\jslearn\node_modules\webpack-cli\bin\cli.js:74
                                throw err;
                                ^

Error: clean-webpack-plugin only accepts an options object. See:

查看源码 CleanWebpackPlugin 的构造器 需要是一个可以省略的 Options对象，所以我们就不写参数了

constructor(options?: Options);

plugins: [
    // "clean-webpack-plugin": "^2.0.2",
    // new CleanWebpackPlugin(),
    // 1.0.1
    // new CleanWebpackPlugin(['dist']),
    new CleanWebpackPlugin(),
    // 在dist文件夹中 自动新建index.html  并且所有的bundle会自动添加到index.html中
    new HtmlWebpackPlugin({
      title: 'output management'
    })

• 最后的webpack.config.js

const path = require('path'),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;

module.exports = {
  // entry: './src/index.js',
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  plugins: [
    // "clean-webpack-plugin": "^2.0.2",
    // new CleanWebpackPlugin(),
    // 1.0.1
    // new CleanWebpackPlugin(['dist']),
    new CleanWebpackPlugin(),
    // 在dist文件夹中 自动新建index.html  并且所有的bundle会自动添加到index.html中
    new HtmlWebpackPlugin({
      title: 'output management'
    })
  ]
};

打包成功

“clean-webpack-plugin”: “^2.0.2”,

我们再来看看2版本的CleanWebpackPlugin

npm install clean-webpack-plugin@2 -D

源码

export default CleanWebpackPlugin;

基本差不多，导出的时候和3版本还是有点区别的，默认导出了一个CleanWebpackPlugin
所以我们在引用的时候需要改一下,直接require就行了

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

完整的webpack.config.js

const path = require('path'),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  // entry: './src/index.js',
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  plugins: [
    // "clean-webpack-plugin": "^2.0.2",
    // new CleanWebpackPlugin(),
    // 1.0.1
    // new CleanWebpackPlugin(['dist']),
    new CleanWebpackPlugin(),
    // 在dist文件夹中 自动新建index.html  并且所有的bundle会自动添加到index.html中
    new HtmlWebpackPlugin({
      title: 'output management'
    })
  ]
};

“clean-webpack-plugin”: “^1.0.1”

再来看看1版本的CleanWebpackPlugin
这个源码差别就很大了，是js写的，2和3版本都是ts

部分源码

function CleanWebpackPlugin(paths, options) {
  //backwards compatibility
  if (typeof options === 'string') {
    options = {
      root: options
    }
  }

  options = options || {};
  if (options.verbose === undefined) {
    if (process.env.NODE_ENV === 'test') {
      options.verbose = false;
    } else {
      options.verbose = true;
    }
  }
  options.allowExternal = options.allowExternal || false;

  if (options.dry === undefined) {
    options.dry = false;
  }

  // determine webpack root
  options.root = options.root || path.dirname(module.parent.filename);

  // allows for a single string entry
  if (typeof paths == 'string' || paths instanceof String) {
    paths = [paths];
  }

  // store paths and options
  this.paths = paths;
  this.options = options;
}
module.exports = CleanWebpackPlugin;

可以看到，这个CleanWebpackPlugin构造器需要两个参数paths和option，需要指定清空文件的路径

plugins: [
    // "clean-webpack-plugin": "^2.0.2",
    // new CleanWebpackPlugin(),
    // 1.0.1
    new CleanWebpackPlugin(['dist']),
    // new CleanWebpackPlugin(),
    // 在dist文件夹中 自动新建index.html  并且所有的bundle会自动添加到index.html中
    new HtmlWebpackPlugin({
      title: 'output management'
    })
  ]

完成的webpack.config.js

const path = require('path'),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  // entry: './src/index.js',
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  plugins: [
    // "clean-webpack-plugin": "^2.0.2",
    // new CleanWebpackPlugin(),
    // 1.0.1
    new CleanWebpackPlugin(['dist']),
    // new CleanWebpackPlugin(),
    // 在dist文件夹中 自动新建index.html  并且所有的bundle会自动添加到index.html中
    new HtmlWebpackPlugin({
      title: 'output management'
    })
  ]
};

问题解决啦

所以官网上的教程clean-webpack-plugin的版本应该
“clean-webpack-plugin”: “^1.0.1”