HtmlWebpackPlugin が生成するリンクのパスを絶対パス指定したい

javascriptをwebpackでビルドしています。
HtmlWebpackPluginを使ってindex.htmlはテンプレートから生成しています。
また、index.htmlが読み込むjsファイルはリビジョン番号つけてます。（[name][hash].js）

HtmlWebpackPluginがindex.htmlの末尾にjsを参照するscriptタグを挿入してくれるのですが、
そのパスが相対パス（src="script.js"）になっており、絶対パス（src="/script.js"）で出力させたいです。
（SPAを開発しているので、ドメイン配下のURLでアクセスされた時にスクリプトのパスが絶対パスでないと読み込めないです。）

フォルダの構成は以下の通りです。

├── public
│ └── js この中に全部出力
├── src
│ ├── html
│ │ └── index.html
│ └── js
│ └── index.jsx

webpackの設定とテンプレートのhtml

javascript
1webpack.config.js
2
3const HtmlWebpackPlugin = require("html-webpack-plugin");
4
5module.exports = [
6    {
7        context: path.join(__dirname, 'src'),
8        entry: {
9            app: './js/index.jsx'
10        },
11        output: {
12            path: path.join(__dirname, 'public/js'),
13            filename: '[name]-[hash].js'
14        },
15        module: {
16            rules: [
17                {
18                    test: /.js[x]?$/,
19                    exclude: /node_modules/,
20                    loader: "babel-loader",
21                    query:{
22                        presets: ['react', 'env']
23                    }
24                },
25                { test: /.html$/, loader: "html-loader" }
26            ]
27        },
28        resolve: {
29            modules: [path.resolve(__dirname, "src/js"), "node_modules"],
30            extensions: ['.js', '.jsx']
31        },
32        plugins: [
33            new HtmlWebpackPlugin({
34                template: "./html/index.html"
35            })
36        ],
37    }
38];

html
1index.html
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6    <title>CarL</title>
7</head>
8<body>
9<noscript>
10    You need to enable JavaScript to run this app.
11</noscript>
12<div id="root"></div>
13</body>
14</html>

詳しい方いましたらよろしくお願いいたします。

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

回答1件

ベストアンサー

以下のかたちでできませんでしょうか。

JavaScript
1// webpack.config.js
2
3const ASSET_PATH = process.env.ASSET_PATH || '/';
4
5module.exports = [
6    // 省略
7    output: {
8        path: path.join(__dirname, 'public/js'),
9        publicPath: ASSET_PATH, /* この行を追加 */
10        filename: '[name]-[hash].js'
11    },
12    // 省略
13];