HappyPack with url-loader

[wjljan]

When i setup my webpack like below:

...
{
      test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
      loader: require.resolve('url-loader'),
      options: {
      limit: 1000,
             name: 'static/media/[name].[hash:8].[ext]',
      },
}
...

I will get a PNG base64 like:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTE1NkNGM0E3ODUyMTFFODkyQzdEMTdGNDk4NURERTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTE1NkNGM0I3ODUyMTFFODkyQzdEMTdGNDk4NURERTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFMTU2Q0YzODc4NTIxMUU4OTJDN0QxN0Y0OTg1RERFMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFMTU2Q0YzOTc4NTIxMUU4OTJDN0QxN0Y0OTg1RERFMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkrgN0UAAACeSURBVHja7NrBCQAhDEVBI/bfcrSGQPCQebANDB/WQyIzl+ptBAABAgSoaud9fsMWCBAgQAEECHDmOzAwWCBAgAAFECBAgAIIECBAAQQIEKAAAgQIUAAbc51lgQABAhRAgADnvgNdZ1kgQIAABRAgQIACCBAgQAEECBCgAAIECFAAO3OdZYEAAQIUQIAA574DXWdZIECAAAXwR1eAAQBLawap9OYqEQAAAABJRU5ErkJggg==

However, after i set this configuration to:

...
{
       test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
       use: ['happypack/loader?id=image'],
},
...

...
plugins: [
...
     new HappyPack({
         id: 'image',
         threadPool: happyThreadPool,
         loaders: [
                {
                    loader: require.resolve('url-loader'),
                    options: {
                        limit: 10000,
                        name: 'static/media/[name].[hash:8].[ext]',
                    },
                }
        ]
    }),
...
]
...

Then i will get an error base64 dataURL like this, and i can't use it to display an image:

data:image/png;base64,77+9UE5HDQoaCgAAAA1JSERSAAAAUAAAAFAIBgAAAO+/vRHvv70AAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlx77+9ZTwAAAMoaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzEzOCA3OS4xNTk4MjQsIDIwMTYvMDkvMTQtMDE6MDk6MDEgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE3IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUxNTZDRjNBNzg1MjExRTg5MkM3RDE3RjQ5ODVEREUxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUxNTZDRjNCNzg1MjExRTg5MkM3RDE3RjQ5ODVEREUxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTE1NkNGMzg3ODUyMTFFODkyQzdEMTdGNDk4NURERTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTE1NkNGMzk3ODUyMTFFODkyQzdEMTdGNDk4NURERTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5K77+9N0UAAADvv71JREFUeO+/ve+/ve+/ve+/vQkAIQxFQSPvv73vv71y77+977+9QO+/vXnvv70NDB/vv71DIjPvv73vv71tBAABAgTvv71q77+9fX7vv70WCBAgQAEECHDvv707MDBYIEDvv70ABRAgQO+/vQIIECBAAQQIEO+/vQACBAhQABtz77+9Ze+/vQABAhRA77+9AO+/vQNdZ1kgQO+/vQAFECBA77+9AggQIEABBAgQ77+9AAIECFAAO3Pvv71l77+9AAECFEDvv70A77+9A11nWSBA77+9AAXvv71HV++/vQEAS2sG77+977+977+9KhEAAAAASUVORO+/vUJg77+9

How could i solve this problem?

[kingback]

+1, seems like the image buffer was transformed to string when use with happypack

[pioneer32]

+1, has affected us as well... we had to disable happypack for url-loader

[weibinzhu]

same here

[dreamthen]

+1