使用 Webpack 解析 css 背景图像 url

Question

我正在使用 webpack，只是尝试将

background-image

属性中指定的

url

应用于 html 元素。

我查看了几个线程（例如这个），但没有找到适合我的东西。

这是我的设置：

//index.js

import React from 'react'
import styles from './styles.css'

const MyComponent = () => {
  return (
    <div className={styles.container}></div>
  )
}

export default MyComponent

// 样式.css

.container {
  background-image: url('../../../static/public/images/my-background.jpg');
}

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "dist"),
    filename: "index.bundle.js"
  },
  mode: process.env.NODE_ENV || 'development',
  resolve: { 
    modules: [path.resolve(__dirname, "src"), "node_modules"],
  },
  devServer: {
    static: path.join(__dirname, 'src')
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: path.join(__dirname, "src", "index.html"),
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'static',
          to: 'static'
        }
      ]
    })
  ],
  module: {
    rules: [
        { 
            test: /\.(js|jsx)$/, 
            exclude: /node_modules/, 
            use: ["babel-loader"] 
        },
        {
            test: /\.(css)$/,
            use: ["style-loader", "css-loader"],
        },
        {
          test: /\.(jpg|png|svg|gif)$/,
          use: ['url-loader', 'file-loader'],
        },
    ],
},
}

到达本地主机时，我确实看到路径正在解析：

但是，当我尝试访问该网址时，我看到的只是一个白色的小方块......

这绝对不是图像。我确实在

./dist/static/public/images/my-background.jpg

中找到了我的构建中存在的图像

请注意，图像尺寸较大：3842 × 2162

我认为这与 webpack 加载器配置有关，但没有找到如何调整它以使其在这里工作。任何帮助将不胜感激！

Answer 1

您可能正在使用新版本的 Webpack，其中

url-loader

和

file-loader

已弃用，

Asset Modules

是替代方案。

尝试使用：

{
      test: /\.(jpg|png|svg|gif)$/,
      type: 'asset/resource',
},

相反。

了解更多信息点击这里。

Answer 2

我遇到了同样的问题，最终通过使用

~

引用项目目录并从那里访问

public

文件夹来工作。

background-image: url("~/public/images/person.png");

这对我来说效果很好:)

OR 另一种选择是将图像移动到

src

目录，webpack 会将它们打包到名为

static/media

的文件夹中作为静态文件

Answer 3

解决方案（使用 5.0 之前的 webpack 版本）是关闭

css-loader

的 URL 解析，因为 webpack 构建时 CSS 文件不会更新 URL 字符串

module.exports = { 
      ...
     module: {
        rules: [ 
            { //https://webpack.js.org/loaders/css-loader/
                test: /\.css$/, 
                use: ["style-loader"]
            },

            { //https://webpack.js.org/loaders/css-loader/
                test: /\.css$/, 
                loader: "css-loader",
                options: {
                    url: false,
                }
            }
        ]
    }

}

请注意，这将使 .css 中使用的文件不会被散列，并且在将项目构建到 /dist/ 文件夹时，其结构将类似于原始 /public/ 文件夹。这就是让它发挥作用的原因。

有关参考，请参阅 这个 github 问题 和 这个问题

另外，我正在使用：

• “css-loader”：“^6.7.2”，
• “文件加载器”：“^6.2.0”，
• “html-webpack-plugin”：“^5.5.0”，
• “样式加载器”：“^3.3.1”，
• “url-loader”：“^4.1.1”，
• “webpack-cli”：“^4.10.0”，
• “webpack-dev-server”：“^4.11.1”

更新：拥有使用“url-loader”的规则对象可能会覆盖其他规则中的文件。因此，在这种情况下，您应该删除它并在“css-loader”中添加选项，如下所示：

{ 
    test: /\.css$/, 
    loader: "css-loader",
    options: {
        url: true,
        esModule: false
    }
}

尝试注释掉每个选项和规则，并查看结果以检查每个选项和规则的作用。在每次构建之前删除 .dist/ 文件夹（因为它不会在每次构建后自动清理），以确保您知道生成了哪些文件以及何时生成。

Answer 4

我刚刚从 webpack v4 升级到 v5，并且根据图像资产管理上的 webpack 文档，我必须确保 css 文件中的图像当前实际上位于我所说的位置，而不是它们所在的位置将会。

因此，更改为：

...
background: url(/static/images/header.jpg)
...

至：

...
background: url(/images/header.jpg)
...

到处都为我解决了这个问题。

Answer 5

大家这都是我遇到的类似问题。但是，我按照正确的顺序设置了所有内容，并将问题发布到 github 上：https://github.com/webpack/webpack/issues/18416

但是，我仍然想问，是否有人知道如何为我的 URL 提供正确的端口。因为在我的例子中，我使用两个不同的服务器，一个是通过 Xampp apache 的 python Flask，它服务器index.html，我将我的 vue 应用程序捆绑为bundle.js，并通过 webpack 在 127.0.0.1:8080 上提供它，现在我的图像有一个没有端口的 URL，当我将端口添加到 URL 时，在浏览器调试器上，我会看到我的图像。如果您需要更多详细信息，请访问该 Git 链接，我在其中提供了与我的项目相关的所有详细信息。另外，我的问题是，是否有一种方法可以告诉我的 webpack 使用哈希在 URL 上添加特定的端口号。

提前致谢。