はじめに
前回はwebpack-watched-glob-entries-pluginを使ってentryオプションを動的に複数指定するやり方について紹介しました。
まだの方はこちらを参照してください。
今回はclean-webpack-pluginを使ってコンパイル毎に出力先フォルダ内を削除するやり方について紹介します。
webpackを使っていると出力先のフォルダに無駄なファイルが溜まっていってしまいます。
無駄なファイルを手動で削除していくのが面倒に感じている方は参考にしてください。
webpackの使い方まとめについてはこちら。
web制作をする場合のwebpackのテンプレート紹介についてはこちら。
それでは説明に移ります。
ディレクトリ構成
今回のディレクトリ構成は以下です。
test
├ node_modules
├ dist
│ ├ a.js
│ ├ b.js
│ └ c.js
├ src
│ └ js
│ ├ another.js
│ └ index.js
├ package-lock.json
├ package.json
├ webpack.common.js
├ webpack.dev.js
└ webpack.prod.js今回はdistフォルダ不要なjsファイルを用意しました。
clean-webpack-pluginを使ってコンパイル時に自動でdistフォルダの不要なjsファイルを削除していきましょう
ファイル内容
今回はwebpack.common.js の記述がメインとなるので、それ以外のファイル内容を参考までに示しておきます。
webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const outputFile = '[name]';
module.exports = merge(common(outputFile), {
mode: 'development',
devtool: 'source-map',
});webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const outputFile = '[name].[chunkhash]';
module.exports = merge(common(outputFile), {
mode: 'production',
});プラグインをインストールしよう
コンパイル時に自動で出力先フォルダ内を削除するためにclean-webpack-pluginをインストールする必要があります。
npm i -D clean-webpack-plugin
下記コマンドをターミナルで実行してclean-webpack-pluginをインストールします。
npm i -D clean-webpack-pluginclean-webpack-plugin公式
webpack.common.jsを編集する
プラグインのインストールが完了したらwebpack.common.jsを編集していきましょう。
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 追加
const WebpackWatchedGlobEntries = require('webpack-watched-glob-entries-plugin');
const entries = WebpackWatchedGlobEntries.getEntries(['./src/js/**/*.js'], {
ignore: './src/js/**/_*.js',
})();
module.exports = (outputFile) => ({
entry: entries,
output: {
path: path.resolve(__dirname, './dist'),
filename: `./js/${outputFile}.js`,
},
plugins: [
new CleanWebpackPlugin(), // 追加
new WebpackWatchedGlobEntries(),
]
});clean-webpack-pluginを追加しました。
clean-webpack-pluginには指定できるオプションがたくさんありますが、いまいち指定するメリットが思いつかないので特に指定していません。
どのようなオプションが指定できるか気になる方は公式を参照してみてください。
コンパイルする
clean-webpack-pluginの設定が完了したのでコンパイルしてみましょう。
以下のコマンドをターミナルから打ち込みます。
npx webpack --config ./webpack.dev.js以下のようなメッセージが出力されていれば正しく実行できています。
PS C:\Users\shuuk\OneDrive\デスクトップ\test> npx webpack --config ./webpack.dev.js
asset index.js 3.7 KiB [emitted] (name: index) 1 related asset
asset another.js 305 bytes [emitted] (name: another) 1 related asset
runtime modules 937 bytes 4 modules
cacheable modules 245 bytes
./src/js/index.js 158 bytes [built] [code generated]
./src/js/another.js 87 bytes [built] [code generated]
webpack 5.61.0 compiled successfully in 122 msdistフォルダを見てみると不要なファイルが削除されているのが分かります。
おわりに
以上clean-webpack-pluginを使ってコンパイル毎に出力先フォルダ内を削除するやり方について紹介しました。
いかがだったでしょうか。
無駄なファイルを手動で削除していくのが面倒に感じている方は参考にしてください。
次回はhtml-webpack-pluginを使ってhtmlファイルを出力する方法について紹介します。
コメント