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 生成了两个html页面：一个是'dist/index.html'（'dist/'是我的输出文件夹），另一个是'dist/examples/index.html'（即'examples/' 文件夹中的'index.html'，HtmlWebpackPlugin 将为我创建）。

当文件加载器在我生成的 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/'）。

重申我的问题：如何让文件加载器生成相对于引用位置的输出文件？也就是说，我希望文件加载器将 'dist/examples/index.html' 中引用的任何 .css 文件输出到 '/dist/examples/css/'。

Answer 1

你可以从 webpack 的输出对象中使用 publicPath，

module.exports = merge(common, {
    mode: "development",
    output: {
        filename: "[name].bundle.js",
        path: path.join(__dirname, "/dist"),
        publicPath: 'https://test.org/example/'
    },
..
..

上述更改将允许两个 index.html 文件在生产中具有相同的相对路径。

index.html

<script type="text/javascript" src="https://test.org/example/test.js"></script>

示例/index.html

<script type="text/javascript" src="https://test.org/example/test.js"></script>

更多关于publicPath请参考答案https://stackoverflow.com/a/38748466/3679048