How do I load binary files using Webpack's `raw-loader`?

Question

Webpack's loaders usually load text files, so in most cases it's more convenient to have the contents of a loaded file converted using some text encoding (usually UTF-8). Binaries on the other hand, should not be converted, so there is a raw property for loaders, which controls (per loader) whether a UTF-8 conversion should be applied or not.

raw-loader is supposed to be loading raw data from files to strings without any conversion, so it might seem logical that it should be exporting the raw property as true. However, it doesn't and there is also a unit test which is supposed to ensure that raw is not exported. It seems it was designed to be used for text-based formats only.

Is there any way around this? What are the alternatives for loading binaries to strings?

Answer 1

The raw-loader package seems to load properly only such text files that consist solely of 7-bit character codes 0-127, while it does not properly handle byte values >=128.

As resolution, use instead the binary-loader package that can load full 8-bit byte values into javascript string format. If necessary, you can then convert the string into Uint8Array.

Example:

// load contents of local file "test.bin" into a js string:
import binAsString from "!!binary-loader!./test.bin";

// if necessary, convert the imported string to Uint8Array:
let array = new Uint8Array(binAsString.length);
for (let i = 0; i < binAsString.length; i++) {
    array[i] = binAsString.charCodeAt(i);
}