image-webpack-loader

[Rocket-Bang]

Hi, amireh

My project is a version of webpack2 and I am attaching a happypack here. But there's a problem. I tried to put the existing code in the happypack and I got the following code.

Code before happypack application:

module: {
            rules: [
                {
                    test: /\.(jpg|png|gif)$/,
                    use: [
                        'file-loader',
                        {
                            loader: 'image-webpack-loader',
                            options: {
                                progressive: true,
                                optimizationLevel: 7,
                                interlaced: false,
                                pngquant: {
                                    quality: '65-90',
                                    speed: 4,
                                },
                            },
                        },
                    ],
                },
            ]
        },

After happypack code:

const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });

plugins: [
            new HappyPack({
                id: 'image',
                threadPool: happyThreadPool,
                loaders: ['file-loader', 'image-webpack-loader?progressive:true&optimizationLevel:7&interlaced:false&pngquant:{quality: "65-90", speed: 4}']
            })
        ],

module: {
            rules: [
                {
                    test: /\.(jpg|png|gif)$/,
                    use: 'happypack/loader?id=image',
                },
            ]
        },

Error in npm start:

Module build failed: TypeError: Expected a buffer
    at Function.module.exports.buffer (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/imagemin/index.js:63:25)
    at Object.module.exports (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/image-webpack-loader/index.js:37:8)
    at applySyncOrAsync (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:350:21)
    at apply (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:277:5)
    at /Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:135:7
    at applyPitchLoader (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:188:14)
    at applyPitchLoader (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:196:14)
    at applyPitchLoader (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:196:14)
    at applyPitchLoaders (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:226:4)
    at applyLoaders (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:120:3)

[amireh]

From the first glance the thing that strikes me is the way you're specifying the options for your loader; they are serialized as a query but look like the contents of a JSON object which I don't think will work.

Try using the options object in your loader specification like you did before happypack (it supports it too:)

plugins: [
            new HappyPack({
                id: 'image',
                threadPool: happyThreadPool,
                loaders: [
                    'file-loader',
                    // see this part
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            progressive: true,
                            optimizationLevel: 7,
                            interlaced: false,
                            pngquant: { quality: "65-90", speed: 4 }
                        }
                    }
            })
        ],

Let me know if that helps.

[Rocket-Bang]

Thank you for your answer to my question. I've already tried this in the way I've shown above, but I get the same error.

Error in npm start: Module build failed: TypeError: Expected a buffer at Function.module.exports.buffer (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/imagemin/index.js:63:25) at Object.module.exports (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/image-webpack-loader/index.js:37:8) at applySyncOrAsync (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:350:21) at apply (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:277:5) at /Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:135:7 at applyPitchLoader (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:188:14) at applyPitchLoader (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:196:14) at applyPitchLoader (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:196:14) at applyPitchLoaders (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:226:4) at applyLoaders (/Users/minbyeonghun/Documents/workspace/wehago-fe-cell-update/node_modules/happypack/lib/applyLoaders.js:120:3) @ ./node_modules/luna-rocket/LUXDialog/LUXDialog.js 49:18-56 @ ./node_modules/luna-rocket/LUXDialog/index.js @ ./src/app/app.js @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill ./src/app/app.js

[Rocket-Bang]

I found that my problem is the same as this issue. But it does not work out. https://github.com/amireh/happypack/issues/114

[amireh]

It may be that that loader is relying on APIs that happypack can't support (due to having to use IPC to communicate between workers, not all APIs can be supported especially those that rely on webpack internals / in-memory objects) but I didn't look at its source.

In any case, you may want to not use happypack for that loader and instead use it for non-binary loaders (e.g. babel or less).