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);
}

Answer 2

I had the same problem and found a much cleaner solution. Use Webpack's url-loader and turn off the encoding in the options. You will also have to remove their default wrapper by modifying the mimetype and generator settings. Here is the working sample that I use in my webpack.config.js.

module: {
  rules: [
    {
      test: /\.bin$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'url-loader',
           options: {
             encoding: false,
             mimetype: false,
             generator: (content) => {
               return content;
             }
           },
         },
       ],
    }
  ],
},

This should import the file byte for byte. You can then grab the buffer and put it in a TypedArray constructor of your choice.