Webpack文件加载器将相同的URL注入HTML和CSS文件

Question

问题是文件加载器总是会向HTML和CSS文件注入相同的URL。

我有流动的项目结构

Webpack文件加载器配置

        {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: [{
                    loader: 'file-loader',
                    options: {

                        name: '[name].[ext]',
                        outputPath: "assets/images",
                        publicPath: '../images'

                    }
                }

            ]
        }

当我使用publicPath：'../ images'它会将流动的URL注入HTML和CSS文件

HTML

<img src='../images/[email protected]'/>

CSS

background-image: url(../images/test-image.jpg);

两个URL都相同，但CSS文件没问题。

当我使用publicPath：'。/ assets / images'它会将流动的URL注入HTML和CSS文件

HTML

<img src='./assets/images/[email protected]' />

CSS

background-image: url(./assets/images/test-image.jpg);

两个URL都相同，但HTML文件没问题。

实际上我想要实现的是File loader将为HTML和CSS文件注入不同的URL。

看起来像这样

HTML

<img src='./assets/images/[email protected]' />

CSS

background-image: url(../images/test-image.jpg);

如何配置Webpack以获得完全高于结果的结果

Answer 1

使用路径模块可以轻松地将文件路径解析为绝对路径。

将以下内容添加到webpack配置的顶部（如果尚未存在）：

var path = require('path');

然后，您可以使用它来解析到不同目录的绝对路径，具体取决于当前工作目录的位置。例如：

publicPath: path.resolve('assets', 'images')

以上应该可以完美地构建资产/图像文件夹的绝对路径。它不会为您提供您在问题中要求的确切结果，但它至少应该解决您的问题。如果没有，请通知我，以便我可以帮助您。