html-webpack-pluginで出力したHTMLにおいて、個別の外部JS・外部CSSを読み込む方法

html-webpack-pluginを使って、複数のHTMLを出力しています。
出力されるHTMLには自動でscriptタグやlinkタグが付与され、JavaScriptやCSSが読み込まれます。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7    <title>タイトル</title>
8    <link href="./css/common.css" rel="stylesheet" />
9    <link href="./css/index.css" rel="stylesheet" />
10    <link href="./css/menu.css" rel="stylesheet" />
11  </head>
12  <body>
13    <div class="wrapper"></div>
14    <script type="text/javascript" src="./js/common.js"></script>
15    <script type="text/javascript" src="./js/index.js"></script>
16    <script type="text/javascript" src="./js/menu.js"></script>
17  </body>
18</html>
19

現状は全てのファイルが読み込まれていますが、ページごとに特定のファイルを読み込むようにしたいです。
例えば以下のような感じです。

出力するHTML	読み込むJS	読み込むCSS
index.html	common.js, index.js	common.css, index.css
menu.html	common.js, menu.js	common.css, menu.css

お詳しい方がいらっしゃいましたらご教授の程よろしくお願いします。

package.json

json
1{
2  "scripts": {
3    "build": "webpack",
4    "watch": "webpack --watch",
5    "fmt": "prettier --write dist/*.html"
6  },
7  "devDependencies": {
8    "@types/jquery": "^3.3.31",
9    "@types/swiper": "^5.2.1",
10    "copy-webpack-plugin": "^5.1.1",
11    "css-loader": "^3.2.0",
12    "html-loader": "^0.5.5",
13    "html-webpack-plugin": "^3.2.0",
14    "mini-css-extract-plugin": "^0.8.0",
15    "node-sass": "^4.12.0",
16    "node-sass-glob-importer": "^5.3.2",
17    "prettier": "^1.19.1",
18    "pug": "^2.0.4",
19    "pug-loader": "^2.4.0",
20    "sass-loader": "^7.1.0",
21    "ts-loader": "^6.2.1",
22    "typescript": "^3.6.4",
23    "webpack": "^4.41.0",
24    "webpack-cli": "^3.3.9",
25    "webpack-fix-style-only-entries": "^0.4.0"
26  },
27  "dependencies": {}
28}
29

webpack.config.js

js
1const path = require('path');
2const globImporter = require('node-sass-glob-importer');
3const HtmlWebpackPlugin = require('html-webpack-plugin');
4const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5const FixStyleOnlyEntries = require('webpack-fix-style-only-entries');
6const CopyWebpackPlugin = require('copy-webpack-plugin');
7
8module.exports = {
9  mode: 'development',
10  devtool: 'inline-source-map',
11  entry: {
12    common: './src/ts/common.ts',
13    index: './src/ts/index.ts',
14    menu: './src/ts/menu.ts',
15    'common.css': './src/scss/common.scss',
16    'index.css': './src/scss/index.scss',
17    'menu.css': './src/scss/menu.scss',
18  },
19  output: {
20    path: path.resolve(__dirname, './dist'),
21    filename: './js/[name].js'
22  },
23  resolve: {
24    extensions: ['.ts', '.js']
25  },
26  module: {
27    rules: [
28      // TypeScript
29      {
30        test: /.ts$/,
31        loader: 'ts-loader'
32      },
33      
34      // Sass
35      {
36        test: /.(sa|sc|c)ss$/,
37        use: [
38          MiniCssExtractPlugin.loader,
39          {
40            loader: 'css-loader',
41            options: {
42              url: false,
43            }
44          },
45          {
46            loader: 'sass-loader',
47            options: {
48              sourceMap: true,
49              outputStyle: 'expanded',
50              importer: globImporter()
51            }
52          }
53        ]
54      },
55
56      // Pug
57      {
58        test: /.pug$/,
59        use: {
60          loader: 'pug-loader',
61          options: {
62            pretty: true,
63          }
64        }
65      },
66    ]
67  },
68  plugins: [
69    new HtmlWebpackPlugin({
70      template: './src/index.pug',
71      filename: './index.html',
72    }),
73    new HtmlWebpackPlugin({
74      template: './src/menu.pug',
75      filename: './menu.html',
76    }),
77    new MiniCssExtractPlugin({
78      filename: './css/[name]',
79    }),
80    new FixStyleOnlyEntries(),
81    new CopyWebpackPlugin([
82      {
83        from: './src/img',
84        to: 'img/'
85      },
86      {
87        from: './src/local',
88        to: 'local/'
89      }
90    ]),
91  ]
92}

行動規範の内容に同意します

回答2件

自己解決

以下のように、html-webpack-pluginのchunksというオプションに読み込みたいファイルを指定するといけました。

webpack.config.js

js
1const path = require('path');
2const globImporter = require('node-sass-glob-importer');
3const HtmlWebpackPlugin = require('html-webpack-plugin');
4const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5const FixStyleOnlyEntries = require('webpack-fix-style-only-entries');
6const CopyWebpackPlugin = require('copy-webpack-plugin');
7
8module.exports = {
9  mode: 'development',
10  devtool: 'inline-source-map',
11  entry: {
12    common: './src/ts/common.ts',
13    index: './src/ts/index.ts',
14    menu: './src/ts/menu.ts',
15    'common.css': './src/scss/common.scss',
16    'index.css': './src/scss/index.scss',
17    'menu.css': './src/scss/menu.scss',
18  },
19  output: {
20    path: path.resolve(__dirname, './dist'),
21    filename: './js/[name].js',
22  },
23  resolve: {
24    extensions: ['.ts', '.js'],
25  },
26  module: {
27    rules: [
28      // TypeScript
29      {
30        test: /.ts$/,
31        loader: 'ts-loader',
32      },
33      
34      // Sass
35      {
36        test: /.(sa|sc|c)ss$/,
37        use: [
38          MiniCssExtractPlugin.loader,
39          {
40            loader: 'css-loader',
41            options: {
42              url: false,
43            }
44          },
45          {
46            loader: 'sass-loader',
47            options: {
48              sourceMap: true,
49              outputStyle: 'expanded',
50              importer: globImporter(),
51            }
52          }
53        ]
54      },
55
56      // Pug
57      {
58        test: /.pug$/,
59        use: {
60          loader: 'pug-loader',
61          options: {
62            pretty: true,
63          }
64        }
65      },
66    ]
67  },
68  plugins: [
69    new HtmlWebpackPlugin({
70      template: './src/index.pug',
71      filename: './index.html',
72      chunks: [
73        'common',
74        'index',
75        'common.css',
76        'index.css',
77      ]
78    }),
79    new HtmlWebpackPlugin({
80      template: './src/menu.pug',
81      filename: './menu.html',
82      chunks: [
83        'common',
84        'menu',
85        'common.css',
86        'menu.css',
87      ]
88    }),
89    new MiniCssExtractPlugin({
90      filename: './css/[name]',
91    }),
92    new FixStyleOnlyEntries(),
93    new CopyWebpackPlugin([
94      {
95        from: './src/img',
96        to: 'img/',
97      },
98      {
99        from: './src/local',
100        to: 'local/',
101      }
102    ]),
103  ]
104}