Webpack：使用 css-loader 和 file-loader 正确解析 CSS 中的 url答案

【问题标题】：Webpack: resolve url in CSS properly using css-loader and file-loaderWebpack：使用 css-loader 和 file-loader 正确解析 CSS 中的 url
【发布时间】：2021-10-07 19:41:32
【问题描述】：

我有一个 webpack 项目，我需要通过 url() 在 css 中设置背景。在其他地方，我想导入图像并在我的 JS 代码中使用它们，所以我使用file-loader。我的webpack.config 规则看起来像这样（注意我不使用 SASS）：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  module: {
    rules: [
      {
        test: /\.(m|c)?jsx?$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
          },
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: {
          loader: 'file-loader',
          options: {
            esModule: false
          }
        }
      },
      {
        test: /\.svg$/i,
        use: {
          loader: 'file-loader',
        }
      },
      {
        test: /\.pug$/i,
        use: {
          loader: 'pug-loader',
          options: {
            pretty: true
          }
        }
      }
    ],
  }
}

我的问题是 file-loader 在解析 url 时会与 css-loader 混淆，所以我得到了两个文件，而不是仅仅将图像发送到输出文件夹：一个具有以下结构的文本文件（webpack 模块）：

module.exports = __webpack_public_path__ + "78c74331dbce5633ed0e385397a47eac.jpg";

以及正确的图像文件：78c74331dbce5633ed0e385397a47eac.jpg。结果 CSS 指向上面的这个 webpack 模块，而不是图像本身。如何防止webpack 创建此模块并使其利用图像的路径？当我删除 file-loader 时一切正常，但我需要 file-loader 在我的应用程序的其他位置加载图像。

我的 CSS 规则如下所示：

.image {
  width: 200px;
  height: 200px;
  background-image: url("../../assets/pizza.jpg");
}

我的文件夹结构：

./src
  /css
    /index.css
  /index.js
./assets
  /pizza.jpg

【问题讨论】：

标签： webpack css-loader webpack-file-loader

【解决方案1】：

我可以通过向css-loader 添加以下选项来解决这个问题：

{
  loader: 'css-loader',
  options: {
    esModule: false
  }
}

【讨论】：