webpack进阶篇（十四）：自动清理构建目录

说明

​​玩转webpack​​课程学习笔记。

bundle，chunk，module

• ​​bundle​​：打包最终生成的文件
• ​​chunk​​：每个chunk是由多个module组成，可以通过代码分割成多个chunk。
• ​​module​​：webpack中的模块（js、css、图片等等）

当前构建时的问题

每次构建的时候不会清理目录，造成构建的输出目录 ​​output​​ 文件越来越多。

通过 npm scripts 清理构建目录

rm -rf ./dist && webpack
rimraf ./dist &&

​​rimraf​​ 包的作用：

​​npm i rimraf -D​​

以包的形式包装​​rm -rf​​命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除。

使用（比如）

const rimraf = require('rimraf');
// 删除当前目录下的 test.txt
rimraf('./test.txt', function (err) {
  console.log(err);
});
//删除dist目录
rimraf(path.resolve(__dirname, '../dist'),err =>{
  if(err) throw err
})

"scripts": {
    "build": "rimraf dist && webpack"
  },

自动清理构建目录

1、避免构建前每次都需要手动删除 ​​dist​​ 文件夹

2、使用 ​​clean-webpack-plugin​​

​​npm i clean-webpack-plugin -D​​

• 默认会删除​​output​​ 指定的输出目录

3、配置plugins

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

module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[chunkhash].js'
  },
  mode: 'production',
  plugins: [
    new CleanWebpackPlugin()
  ]
};