はじめに
前回はoutputオプションを記述してコンパイル後にバンドルされたJavaScriptファイルの出力先を設定するやり方について紹介しました。
まだの方はこちらを参照してください。
今回はwebpack-watched-glob-entries-pluginを使ってentryオプションを動的に複数指定するやり方について紹介します。
大規模なプロジェクトになってくるとエントリポイントが複数になる場合があり、その都度entryオプションを変更するのは面倒ですよね。
エントリポイントの複数指定を毎回手動で行っている方は参考にしてください。
webpackの使い方まとめについてはこちら。
web制作をする場合のwebpackのテンプレート紹介についてはこちら。
それでは説明に移ります。
ディレクトリ構成
今回のディレクトリ構成は以下です。
test
├ node_modules
├ dist
├ src
│ └ js
│ ├ module
│ │ ├ _bye.js
│ │ ├ _good.js
│ │ └ _hello.js
│ ├ another.js
│ └ index.js
├ package-lock.json
├ package.json
├ webpack.common.js
├ webpack.dev.js
└ webpack.prod.js今回はjsフォルダの中にエントリポイントとするanother.jsとindex.js という2つのjsファイルを用意しました。
またそれ以外のエントリポイントに指定しないjsファイルはmoduleフォルダにパーシャルファイルとして入れています。
こちらをentryオプションにglob指定させてコンパイルさせていきましょう。
ファイル内容
今回はwebpack.common.js の記述がメインとなるので、それ以外のファイル内容を参考までに示しておきます。
another.js
import { good } from './module/_good';
console.log('another.jsです');
good();index.js
import './another';
import { bye } from './module/_bye';
import { hello } from './module/_hello';
console.log('index.jsです');
bye();
hello();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',
});プラグインをインストールしよう
entryオプションをglob指定するためにwebpack-watched-glob-entries-pluginをインストールする必要があります。
npm i -D webpack-watched-glob-entries-plugin
下記コマンドをターミナルで実行してwebpack-watched-glob-entries-pluginをインストールします。
npm i -D webpack-watched-glob-entries-pluginwebpack-watched-glob-entries-plugin公式
webpack.common.jsを編集する
プラグインのインストールが完了したらwebpack.common.jsを編集していきましょう。
const path = require('path');
const WebpackWatchedGlobEntries = require('webpack-watched-glob-entries-plugin'); // 追加
// 追加
const entries = WebpackWatchedGlobEntries.getEntries([path.resolve(__dirname, './src/js/**/*.js')], {
ignore: path.resolve(__dirname, './src/js/**/_*.js'),
})();
module.exports = (outputFile) => ({
entry: entries, // 変更
output: {
path: path.resolve(__dirname, './dist'),
filename: `./js/${outputFile}.js`,
},
plugins: [
new WebpackWatchedGlobEntries(), // 追加
]
});WebpackWatchedGlobEntries.getEntriesの第一引数にエントリポイントとするファイルのパス、第二引数にignoreオプションに除外するファイルのパスを指定します。
entries変数の中身は以下のようになっています。
{
another: 'C:/Users/shuuk/OneDrive/デスクトップ/test/src/js/another.js',
index: 'C:/Users/shuuk/OneDrive/デスクトップ/test/src/js/index.js'
}コンパイルする
entryの設定が完了したのでコンパイルしてみましょう。
以下のコマンドをターミナルから打ち込みます。
npx webpack --config ./webpack.dev.js以下のようなメッセージが出力されていれば正しく実行できています。
PS C:\Users\shuuk\OneDrive\デスクトップ\test> npx webpack --config ./wbpack.dev.js
asset ./js/index.js 5.06 KiB [compared for emit] (name: index) 1 related asset
asset ./js/another.js 3.34 KiB [compared for emit] (name: another) 1 related asset
runtime modules 1.31 KiB 6 modulescacheable modules 380 bytes
modules by path ./src/js/module/*.js 153 bytes
./src/js/module/_bye.js 49 bytes [built] [code generated]
./src/js/module/_hello.js 53 bytes [built] [code generated]
./src/js/module/_good.js 51 bytes [built] [code generated]
modules by path ./src/js/*.js 227 bytes
./src/js/index.js 146 bytes [built] [code generated]
./src/js/another.js 81 bytes [built] [code generated]
webpack 5.61.0 compiled successfully in 130 msglob指定でanother.jsとindex.js をエントリポイントとしてコンパイルができるようになりました。
おわりに
以上webpack-watched-glob-entries-pluginを使ってentryオプションを動的に複数指定するやり方について紹介しました。
いかがだったでしょうか。
エントリポイントの複数指定を毎回手動で行って面倒に思っている方は参考にしてください。
次回はclean-webpack-pluginを使ってコンパイル毎に出力先フォルダ内を削除するやり方について紹介します。
コメント