如何不使用 Webpack 解析路径？答案

【问题标题】：How to NOT resolve paths with Webpack?如何不使用 Webpack 解析路径？
【发布时间】：2017-06-29 02:03:43
【问题描述】：

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

我希望不解析字体路径并保持它在 SASS 文件中的设置方式。

问题：

如果我调用绝对路径（即：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 也不知道如何处理此类文件。

这是我得到的错误：

模块解析失败：C:....\fonts\my-font.eot 意外字符' ' (1:1) 你可能需要一个合适的加载器来处理这个文件类型。

我还尝试禁用 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"]
      },
      ...
    ]
  },
  ...
}

【问题讨论】：

也许我对您的目的感到困惑，但您是否尝试过不要求它们？我的意思是，如果你只是不想让 webpack 使用它们，那就不需要它们
@Mese 实际上，我不想“要求”它们。问题是 CSS 文件中的所有 url(...) 都是 css-loader 和 url-loader 自动需要的。所以，问题是，我怎么不需要它们？

标签： javascript reactjs webpack require

【解决方案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"],

},

【讨论】：

【解决方案2】：

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

因为没有找到直接使用数组语法添加选项的方法，只好改用字符串语法。

此代码不起作用：

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

此代码有效：

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

【讨论】：

为后面的人验证你自己的答案:)