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

Question

我有一个 webpack 项目，我需要在 css 到 url() 中设置背景。在其他地方，我想导入图像并在我的 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

Answer 1

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

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

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

Webpack: resolve url in CSS properly using css-loader and file-loader

webpack

css-loader

webpack-file-loader