Webpack 图像加载器编码中断

Question

我正在尝试创建用于图像处理的 webpack 加载程序。它应该非常简单明了：找到扩展名为 /.png$/ 的所需模块，将其写入我的测试文件。根据 loader API，我收到模块的内容作为加载程序函数的第一个参数。但我不太明白我收到的是什么编码。据我所知，PNG 文件是二进制文件，但 javascript 字符串按照规范采用 UTF16 编码。

我写了一些代码：

webpack.config.js

let path = require("path");

module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js"
  },
  module:{
    rules:[
      {
        test: /\.png$/i,
        use: [
          {
            loader: path.resolve('./loader.js'),
          }
        ]
      }
    ]
  },
  watch: true
};

loader.js

let getOptions = require('loader-utils').getOptions;
var fs = require("fs");

module.exports = function(source){
    fs.writeFileSync("my.png", source, "binary");
    return "";
};

就我而言，我最初的想法是我可以做一些事情，比如读取源代码到 Buffer 并将它的编码设置为 UTF-16，然后将这个 Buffer 写入文件，但是那没有工作。

问题是我应该如何处理源以将其写入文件并从源创建有效的 png。因为现在我得到的只是一堆错误，比如 "cannot open file...".

Answer 1

我偶然发现了答案，它只是写

module.exports.raw = true;

在我的装载机里。这样加载程序将真正获得原始缓冲区。否则我得到的缓冲区被识别为 UTF-8 编码。很奇怪，考虑到 javascript 字符串按照规范

是 UTF-16

Webpack 图像加载器编码中断

Webpack image loader encoding breaks

javascript

encoding

image

loader

webpack