webpack-contrib/cache-loader

Should cache-loader use `module.exports.raw = true` to handle binary file ?

malash opened this issue ยท 6 comments

  • Operating System: MacOS
  • Node Version: 11.0.0
  • NPM Version: 6.9.0
  • webpack Version: 4.30.0
  • cache-loader Version: 2.0.1

Expected Behavior

// webpack.config.js
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "index.js"
  },
  module: {
    rules: [
      {
        test: /\.png$/,
        use: ["file-loader", "cache-loader"]
      }
    ]
  }
};
// index.js
import png from "./index.png";

console.log(png);

In this case. The .png is broken because cache-loader is not a raw loader. Which means the source is an UTF-8 string instead of Buffer. The binary data will be broken during conversion processed.

Some loaders, e.g. file-loader, added module.exports.raw = true to solved this issue.

Actual Behavior

.png file broken.

How Do We Reproduce?

cc: @Jimexist

/cc @mistic I think we can fix it ๐Ÿ˜„

@malash thanks for the report! Do you think you can provide a small example repo where I can reproduce the error and play with a solution?

@malash could you try with that PR #69 if it fixes your issue?

Thanks @mistic .

I'v testes the export const raw = true and it works for my case.

There are 2 questions:

  1. Should we handle buffer stringify manually ? JSON.stringify would convert buffer to object but JSON.parse won't restore it.

image

  1. Should we encode the buffer before writing cache file to reduce the cache file size ?

https://nodejs.org/api/buffer.html#buffer_buffers_and_character_encodings

@malash thanks for the suggestions. I've fixed the JSON.stringify & JSON.parse problems and buffers are also now encoded in base64. You can test it with the last changes on #69

Cool. Great work.