【webpack】不要ファイルを削除する[clean-webpack-plugin]の使い方

記事内に商品プロモーションを含む場合があります

clean-webpack-pluginの使い方を知りたい
webpackの仕組みを知りたい

上記の疑問の解決記事です。

※前回まででhtml-webpack-pluginをインストールしました。

【webpack】HTMLファイルを自動生成する[html-webpack-plugin]の使い方 html-webpack-pluginの使い方について知りたい html-webpack-pluginって何のために使うの？ ...

本記事では、不要ファイルを削除するclean-webpack-pluginの使い方について解説していきます。早速、進めましょう。

Contents

clean-webpack-pluginをインストール
1. package.jsonを確認
webpack-config.jsに設定を追加
webpackを起動する
clean-webpack-pluginの動き
まとめ

clean-webpack-pluginをインストール

下記コマンドでclean-webpack-pluginをインストールします。

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

package.jsonを確認

正常にインストールできたか、package.jsonを確認します。

//package.json


{
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0", //追加
    "css-loader": "^6.5.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.4.5",
    "node-sass": "^7.0.1",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}

webpack-config.jsに設定を追加

プラグインをインストールしたら、configファイルに設定追加をします。

//webpack-config.js


const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//ここから追加
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//ここまで追加

module.exports = {
    entry: './src/index.js',
    output: {
        path: `${__dirname}/dist`,
        filename: 'bundle.js'
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(css|sass|scss)/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        //ここから追加
        new CleanWebpackPlugin()
        //ここまで追加
    ]
}

const CleanWebpackPlugin ではなく、const { CleanWebpackPlugin }

※他プラグインと違い、{}があるので注意

webpackを起動する

設定ファイルに設定を追加したら、下記コマンドでwebpackを起動します。

npm run build

clean-webpack-pluginの動き

動きが分かりにくいですが、一度dist/内が削除され、ファイルが生成されます。

※生成過程で不要ファイルは削除されます。

以下は、現在の階層構造です。

webpack-tutorial
├dist/
|   ├──bundle.js
|   ├──index.html
|   └──main.css 
|
├node_modules/
├src/
|   ├──images/
|   ├──index.js
|   ├──style.scss
|   └──sub.js
|
├package-lock.json
├package.json
└webpack.config.js