close

Clean Webpack Plugin: クリーンなビルドを維持する

「CleanWebpackPlugin」は、 Webpack 新しいファイルを生成する前に指定されたディレクトリをクリーンアップすることでビルド出力の管理に役立つ人気のプラグインです。 これは、古いファイルや不要なファイルがビルド ディレクトリに蓄積されるのを防ぐのに役立ちます。 CleanWebpackPlugin の使用方法を簡単に説明します。

インストール

まず、前の説明で示したように、プロジェクトに と がインストールされている Webpack こと を確認します。 webpack-cli 次に、CleanWebpackPlugin をインストールします。 

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

構成

ファイルを開いて webpack.config.js プラグインをインポートします。 

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

配列内で plugins 、以下をインスタンス化します CleanWebpackPlugin。 

module.exports = {  
  // ...other configuration options  
  
  plugins: [  
    new CleanWebpackPlugin()  
    // ...other plugins  
  ]  
};

デフォルトでは、プラグインは設定 output.path で定義されているものを消去します Webpack。

カスタム構成

CleanWebpackPlugin コンストラクターにオプションを渡すことで、 の動作をカスタマイズできます。 例えば： 

new CleanWebpackPlugin({  
  cleanOnceBeforeBuildPatterns: ['**/*', '!importantFile.txt']  
})

この例では、 を除くすべてのファイルとディレクトリがクリーンアップされます importantFile.txt。

ランニング Webpack

Webpack プロジェクトをビルドするために 実行すると、 CleanWebpackPlugin 新しいビルド ファイルを生成する前に、指定されたディレクトリが自動的にクリーンアップされます。

clean-webpack-plugin より高度な構成とオプション については、必ず の公式ドキュメントを参照してください。 このプラグインは、クリーンなビルド出力ディレクトリを維持し、不要な混乱を避けるのに非常に役立ちます。