用 Webpack 解析 css 背景圖像 url

Question

我正在使用 webpack 並只是嘗試將url屬性中指定的background-image應用於 html 元素。

我看過幾個線程（例如這個線程），但沒有找到適合我的東西。

這是我的設置：

// 索引.js

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

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

export default MyComponent

// styles.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'],
        },
    ],
},
}

到達本地主機時，我確實看到了正在解析的路徑：

但是，當我嘗試撥打 url 時，我看到的只是一個白色的小方塊……

這絕對不是圖像。 我確實在./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");

這對我來說很好:)

或者，另一種選擇是將圖像移動到src目錄，webpack 會將它們打包到一個名為static/media的文件夾中作為靜態文件

Answer 3

解決方案（使用 webpack 5.0 之前的版本）是關閉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”，
• “網址加載器”：“^4.1.1”，
• “webpack-cli”：“^4.10.0”，
• “webpack-dev-server”：“^4.11.1”

更新：使用“url-loader”的規則 object 可能會覆蓋其他規則中的文件。 所以，在那種情況下，你應該刪除它並在 '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)
...

到處都為我解決了這個問題。