使用 Webpack 解析 css 背景图像 url

Question

我正在使用 webpack，只是尝试将在 url 属性中指定的 background-image 应用于 html 元素。

我查看了几个线程（例如this one），但没有找到适合我的内容。

这是我的设置：

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

到达 localhost 时，我确实看到了正在解析的路径：

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

这绝对不是图片。我确实在 ./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',
},

改为。

欲了解更多信息click here。