通过 webpack 中的 css-loader 背景图像答案

【问题标题】：Background image via css-loader in webpak通过 webpack 中的 css-loader 背景图像
【发布时间】：2021-10-21 23:50:51
【问题描述】：

我在 div 元素中有这样的 css 样式：

.header {
  height: 80px;
  width: 100vw;
  background: url("../../assets/bg.jpg");
}

在构建后，它看起来像 webpack 中的 css-loader 在输出中创建一个扩展名为 .jpg 的新文件，并因此更改 css：

.header {
  height: 80px;
  width: 100vw;
  background: url(0053f91466b237c7ea79.jpg);
}

文件0053f91466b237c7ea79.jpg不是图片，它只包含字符串export default __webpack_public_path__ + "bg.jpg";。

同时，文件加载器正确地提取了这张图片 bg.jpg。

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "production",
  entry: "./index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              url: true,
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
        },
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js"],
  },
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js",
  },
  plugins: [new HtmlWebpackPlugin(), new MiniCssExtractPlugin()],
};

【问题讨论】：

标签： webpack background background-image css-loader

【解决方案1】：

似乎是css-loader 的版本导致了这个问题。使用旧版本的css-loader（例如：3.4.2），可以通过file-loader创建正确的图像和图像url。但是最新版本的css-loader 在与file-loader 一起使用时会出错。构建后，它看起来像 css-loader 在 webpack 中使用正确的图像在输出中创建一个新文件并更改 css。并且file-loader重写该图像的内容并提取另一个正确的图像。

解决方案：

从您的 webpack.config.js 中删除了 file-loader
使用旧版本的css-loader

【讨论】：