如何在Webpack中避免解析路径？

Question

我正在使用Webpack、sass-loader、css-loader和url-loader开发一个ReactJs项目。

我想保留SASS文件中的font-face路径，不进行解析。

但是，当我使用绝对路径（例如：http://fonts.com/my-font.eot或/path/to/my-font.eot）时，该路径不会被解析；而如果我使用相对路径（例如：my-font.eot或path/to/my-font.eot），则url-loader会尝试解析该路径。

在我的情况下，我需要使用相对路径（即使这会导致生成404错误）。

我尝试排除所有字体扩展名，在url-loader中添加该项，但是Webpack无法处理此类型的文件，即使该文件可能不存在。我得到了以下错误信息：

Module parse failed: C:....\fonts\my-font.eot Unexpected character ' ' (1:1) You may need an appropriate loader to handle this file type.

我还尝试禁用css-loader中的"url"选项，但是没有任何效果。我认为我可能没有正确地添加该选项。

{
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    options: { url: false }
},

这是我的当前代码：

module: {
    loaders: [
      {
        exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.css$/,
          /\.scss$/,
          /\.json$/,
          /\.svg$/
        ],
        loader: 'url',
        query: {
          limit: 10000,
          name: 'path/dist/[name].[hash:8].[ext]'
        }
      },
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      },
      ...
    ]
  },
  ...
}

- saawsann

---

也许我对你的目的感到困惑，但是你是否尝试过不要求它们？我的意思是，如果你只是不想让webpack使用它们，那就不要要求它们。 - Mese

@Mese 实际上，我不想“require”它们。问题在于CSS文件中的所有url（...）都会被css-loader和url-loader自动要求。那么，问题是，我如何不要求它们？ - saawsann

Answer 1

这个问题可能有点旧，但我仍然想更正答案。

当您想使用数组语法时，您基本上需要为每个加载器定义所有选项。为了做到这一点，您必须在数组中为加载器使用一个对象。因此，而不是：

{
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    options: { url: false }
},

你需要编写代码

{
    test: /\.scss$/,
    loaders: [
         "style-loader", 
         {
            loader:'css-loader',
            options: {
                 url: false
            }
         },
         "sass-loader"],

},

- Dustin Gogoll

Answer 2

我需要一个与已接受的解决方案不同的解决方案。

  /* webpackIgnore: true */
  background: url('/api/assets/?image=background.webp');

做到了。在我的情况下，我想跳过解析一个我想通过调用后端来解析的路径，所以它必须保持这样，不应该被Webpack解析。

我在Webpack文档中找到了这个注释语法/* webpackIgnore: true */。

[编辑]

当我尝试构建时，Webpack注释被postcss和cssnano剥离了（我正在使用Vue），我不得不以这种形式写它以便注释被保留，并且它也通过了构建：/*! /* webpackIgnore: true */。

- antoni

Answer 3

我找到了解决方案。我没有正确添加css-loader选项。

因为我没有找到一种使用数组语法直接添加选项的方法，所以我不得不切换到字符串语法。

这段代码无效：

{
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    options: { url: false }
},

这段代码有效：

{
    test: /\.scss$/,
    loader: 'style!css?url=false!sass'
}

- saawsann

---

为后来的人验证你自己的答案 :) - Mese