Dọn dẹp thư mục - CleanWebpackPlugin

• Plugin CleanWebpackPlugin được dùng để dọn dẹp lại thư mục dist (hoặc các thư mục khác tùy ý) được gọn gàng hơn, giúp xóa bỏ các file không cần thiết.
• Trước tiên, ta tiến hành cài đặt CleanWebpackPlugin và cấu hình file webpack.config.js như bên dưới:

npm install --save-dev clean-webpack-plugin

Kết quả

Chỉnh nội dung file webpack.config.js:

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

module.exports = {
  entry: {
  /*[name]: [path]*/
    app: './src/index.js',
    print: './src/my-test.js'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

• Tiến hành chạy lệnh npm để thực thi nội dung trên:

npm run build

• Khi này xem lại trong thư mục dist, các file không sử dụng đã bị xóa, cụ thể là file main.js đã không còn trong project:
• Cấu trúc thư mục khi này:

• node_modules

  • ...
• package.json
• webpack.config.js
• package-lock.json

• dist

  • index.html
  • app.bundle.js
  • print.bundle.js
  • vendors~app~print.bundle.js

• src

  • index.js
  • my-test.js

• Ta thấy, với cách sử dụng plugin CleanWebpackPlugin đã giúp dọn dẹp các file dư thừa không cần thiết rất gọn, mà không cần tốn thời gian để kiểm tra xem file đó có được sử dụng ở đâu hay không, thử tưởng tượng khi project của bạn lớn, số lượng file tính vài ngàn, mà bạn cần dọn dẹp các file không dùng xóa đi, thì bạn sẽ làm như thế nào?

Các lệnh chính đã sử dụng trong toàn bộ bài học

cd Webpack-project
npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli

npx webpack

npx webpack --config webpack.config.js
npm run build

npm run build

npm install --save-dev html-webpack-plugin
npm run build

npm install --save-dev clean-webpack-plugin
npm run build