为什么带有 webpack 的 url-loader 返回格式错误的 base64？答案

【问题标题】：why does url-loader with webpack returns malformed base64?为什么带有 webpack 的 url-loader 返回格式错误的 base64？
【发布时间】：2016-05-18 20:14:19
【问题描述】：

我为 Webpack 下载并包含了 url-loader：

loaders: [
  {
    test: /.jsx?$/,
    include: path.join(__dirname, './public/scripts'),
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
      presets: ['es2015', 'react']
    }
  },
  {
    test: /\.css$/,
    loader: "style-loader!css-loader"
  },
  {
    test: /\.png$/,
    loader: "url-loader?limit=10000"
  },
]

在我的一个 React 组件中，我有这行代码，目前运行良好：

var style = { "backgroundImage": "url(images/icons/icon.png)" };

但是，这些图标很小，我希望将它们作为 base64 内联，而不是作为图像单独发送。我找到了 URL loader 并将该行替换为：

var style = { "backgroundImage": require("url?limit=10000!../images/icons/icon.png") };

这种工作方式是找到图像并将其替换为base64，但格式错误。

我使用了base64解码器，发现解码后的base64以module.exports = 开头。这导致它使图像显示为空白。

我通过删除返回的 base64 的前 25 个左右字符进行了临时修复，但由于使用 base64 填充，它非常混乱。很难找到module.exports = 结束的位置，然后在末尾正确填充=。

我觉得我一定做错了什么。如果没有，我是否可以使用另一个加载器，它只将图像返回为base64 而没有任何其他垃圾？

【问题讨论】：

这个问题就像是我的问题的灵感，我留下了一个赞成票。谢谢。

标签： javascript image reactjs webpack loader

【解决方案1】：

其实是因为这样的配置：

{
  test: /\.png$/,
  loader: "url-loader?limit=10000" // <== limit
},

url-loader 得到limit 选项，最大情况下只有10000 字节，这意味着超过10k 字节 的文件将被转换。

你的问题是 5 年前，我们有几个新版本的 Webpack 和 url-loader，它们的选项变成了 JavaScript 对象。您可以通过boolean或number来确定转换为外部文件或base64的限制。

【讨论】：