Webpack-5

Question

升级到 Webpack-5 后出现此错误：

Error: Can't resolve '/path/to/image.jpg' in '/app/path/to/module/module'

问题在于用于 css 背景的图像，其中文件未存储在存储库中，并且在构建时不可用。（为什么这样是另一个故事。）

问题：

在我的 css 文件中：

background-image: url(/path/to/image.jpg);

在 Webpack-4 中，它保持原样，并且可以正常工作。

Webpack-5 尝试处理图像并失败并出现上述错误。

这没有用：

正在为路径添加引号...

background-image: url("/path/to/image.jpg");

我试过 Webpacks 魔术评论...

/* webpackIgnore: true */
background-image: url(/path/to/image.jpg)

...但它没有用（也许乳清被剥离得太早了？-这似乎是我的 create-react-app example 中运行的开发构建所证明的情况）

webpack.IgnorePlugin

我还尝试了 here 中的一些边缘案例技巧。但我认为这为时已晚，因为 Webpack 已经假定该文件存在。

这有效但是...

有效的是包括资产的绝对路径：

background-image: url(https://www.example.com/path/to/image.jpg);

但这会产生一系列问题。

更新：

我在 this repo 中重现了这个问题：

Webpack 魔术注释适用于开发构建，但不适用于生产构建。

~/webpack-test$ npm run build

> webpack-test@0.1.0 build
> node scripts/build.js

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve '/mypics/pom.jpg' in '/home/nodejs/webpack-test/src'

Answer 1

原来 css-loader 在 options.url 下有配置选项！

Thank you Alexander Akait from the Webpack team for answering my question here.

它可以选择传递包含 filter() 谓词函数的对象，该函数应确定是否应处理路径：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: {
            filter: (url, _resourcePath) => {
              // Disable processing for root-relative urls under /images
              return !/^\/images\//.test(url)

              // This would disable processing for all root-relative urls:
              // return !/^\//.test(url);
            },
          },
        },
      },
    ],
  },
};

这是我在问题中提到的 repo 中用于修复此问题的提交：https://github.com/dovidweisz/webpack-test/commit/a9e4cfc4ae0a5a8475ddd2cc114a8650846db421

您也可以通过简单地将 false 传递给 options.url 来禁用 ALL url-handling:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: false,
        },
      },
    ],
  },
};

Webpack-5 - 阻止 Webpack 处理 scss（或 css）中图像的根相对路径

Webpack-5 - Stop Webpack from processing root-relative paths to images in scss (or css)

webpack

升级到 Webpack-5 后出现此错误：

问题：

这没有用：

这有效但是...

更新：

我在 this repo 中重现了这个问题：