2

有没有办法提示 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”（即“index.html”）。 'examples/' 文件夹中的 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/”。

4

1 回答 1

0

你可以从 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 文件在生产中具有相同的相对路径。

索引.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

于 2020-06-15T02:15:03.513 回答