javascript - webpack は、require が発生するファイルに相対的な outputPath を設定します

Question

生成されたファイルが必要に応じて発生するファイルに関連する出力ファイルを生成するように webpack にヒントを与える方法はありますか? 次の構成があるとします。

let indexHTML = new HtmlWebpackPlugin({
    template: "./src/pug/index.pug",
    filename: 'index.html',
})

let iframeExample = new HtmlWebpackPlugin({
    template: "./src/pug/iframe-example.pug",
    filename: 'examples/index.html',
})

module.exports = merge(common, {
    mode: "development",
    output: {
        filename: "[name].bundle.js",
        path: path.join(__dirname, "/dist"),
    },
    entry: { 
        index: "./src/js/index.js",
    },
    plugins: [
        new CleanWebpackPlugin(), 
        indexHTML,
        iframeExample
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { 
                        loader: 'file-loader',
                        options: {
                            name: "[name].[ext]",
                            outputPath: "css",
                            esModule: false,
                        } 
                    }
                ]
            },
            {
                test: /\.(svg|png|jpg|gif)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]",
                        outputPath: "imgs",
                        esModule: false,
                    }
                }
            },
            {
                test: /\.(aac|mp3)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]",
                        outputPath: "audio",
                        esModule: false
                    }
                }
            },
            {
                test: /\.(webm|mp4)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]",
                        outputPath: "video",
                        esModule: false
                    }
                }
            },
        ]
    },
});

この構成では、HtmlWebpackPlugin によって 2 つの html ページが生成されます。 HtmlWebpackPlugin が作成する 'examples/' フォルダー内の html)。

ファイルローダーは、生成された html ファイルで require/import ステートメントに遭遇すると、それを URL に解決し、そのファイルを作業フォルダー構造から出力フォルダーにコピーしようとします。file-loader の outputPath で、出力コンテンツ (「imgs」、「video」など) の相対パスを指定しました。これは、file-loader によって生成されるすべての URL の前に付けられ、対応する各 html に相対 URL が生成されます。 .

問題は、フォルダー自体が出力フォルダー (私の場合は「dist」) に生成され、出力フォルダー構造で対応する html が発生する場所ではないことです。つまり、「dist/examples/index.html」で参照されるすべての .css ファイルは「dist/css/」フォルダーに配置されるため、「dist/examples/index.html」には表示されません。相対パス ('css/')。

私の質問を繰り返します: file-loader が参照されている場所に関連する出力ファイルを生成するようにするにはどうすればよいですか? つまり、file-loader が「dist/examples/index.html」で参照されている .css ファイルを「/dist/examples/css/」に出力するようにします。