[插件4 构建] clean-webpack-plugin

• clean-webpack-plugin

在building之前用来移除或者清理build文件夹的webpack插件

yarn add -D clean-webpack-plugin

使用

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

// webpack config
{
  plugins: [
    new CleanWebpackPlugin(paths [, {options}])
  ]
}

示例：

const CleanWebpackPlugin = require('clean-webpack-plugin'); //installed via npm
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

// 要被清理的路径
let pathsToClean = [
  'dist',
  'build',
];

// clean的配置
let cleanOptions = {
  root: '/full/webpack/root/path',
  exclude: ['shared.js'],
  verbose: true,
  dry: false,
};

const webpackConfig = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
   module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(pathsToClean, cleanOptions),
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

参数说明

// paths {array} 要被清理的路径
[
  'dist', // 移除 'dist' 文件夹
  'build/*.*', // 移除 'build' 夹下所有文件
  'web/*.js', // 移除 'web' 文件夹中所有的js文件
]

// options和默认值
{
  // 根目录下的绝对路径(路径将添加在根路径下)
  // 默认值： 根目录
  root: __dirname,
  
  // 在console中写logs
  verbose: true,
  
  // 使用 'true' 来模拟或者测试删除，只是模拟，不会真的删除
  dry: false,
  
  // 如果为true, 在重新编译的时候删除所有的文件
  watch: false,
  
  // 多用于build目录中共享的文件 不移除
  exclude: ['files', 'to', 'ignore'],
  
  // 允许插件清理webpack root目录之外的文件夹
  // 默认是 false, 不允许清理webpack目录之外的文件夹
  allowExternal: false,
  
  // 在文件产生前进行清理
  beforeEmit: false,
}