webpack.config.jsファイルの設定について、具体的な多エントリポイント構成の実装方法を解説します。
従来の設定例は以下の通りです：
module.exports = {
mode: 'development',
// エントリポイント
entry: __dirname + '/src/entry.js',
// 出力先
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
}
}
この設定では単一のエントリポイントと出力先を指定しています。以下では複数ページ対応の設定方法を説明します。
準備作業
1. ディレクトリ構成の作成：pageフォルダにindex.htmlとsignup.htmlを作成します。
index.htmlのコード例：
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>トップページ</title>
</head>
<body>
<div id="title"></div>
<script src="../src/base.js"></script>
<script src="../src/index.js"></script>
</body>
</html>
signup.htmlのコード例：
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会員登録</title>
</head>
<body>
<script src="../src/base.js"></script>
<script src="../src/signup.js"></script>
</body>
</html>
2. srcディレクトリに以下の3つのJSファイルを作成：
base.js:
const activeFlag = true;
export { activeFlag };
index.js:
import { activeFlag } from './base';
if (activeFlag) {
document.body.innerHTML = `<a href="signup.html">新規登録</a>`;
}
signup.js:
import { activeFlag } from './base';
if (activeFlag) {
document.body.innerHTML = `<h1>ウェルカムメッセージ</h1>`;
} else {
document.body.innerHTML = `<h1>現在登録受付は停止中です</h1>`;
}
多エントリポイントの設定
webpack.config.jsの修正例：
module.exports = {
mode: 'development',
entry: {
mainPage: __dirname + '/src/index.js',
registerPage: __dirname + '/src/signup.js',
},
output: {
path: __dirname + '/dist',
filename: '[name].js',
}
}
この設定では：
entryをオブジェクト形式に変更output.filenameに[name]プレースホルダーを使用
実行後、distディレクトリにはmainPage.jsとregisterPage.jsが生成されます。HTMLファイルのスクリプト参照をそれぞれのバンドルファイルに変更してください。
最終的なファイル構成イメージ：
dist/
├── mainPage.js
└── registerPage.js