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

Question

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

我得到了流动的项目结构

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/team-1@2x.png'/>

CSS

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

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

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

HTML

<img src='./assets/images/team-1@2x.png' />

CSS

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

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

实际上我想要实现的是文件加载器将不同的 URL 注入 HTML 和 CSS 文件。

看起来像这样

HTML

<img src='./assets/images/team-1@2x.png' />

CSS

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

如何配置 Webpack 以获得恰好高于结果

Answer 1

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

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

var path = require('path');

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

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

以上内容应该可以完美地构建 assets/images 文件夹的绝对路径。它不会给你你在问题中要求的确切结果，但它至少应该解决你的问题。如果没有，请通知我，我可以帮助你。

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

Webpack file-loader inject the same URL to the HTML and CSS file

javascript

webpack

webpack-4

html-webpack-plugin

webpack-file-loader