wp-webpack-script icon indicating copy to clipboard operation
wp-webpack-script copied to clipboard

How to add 'image-webpack-loader' to compress assets in CSS files ?

Open Deejay-Ste opened this issue 5 years ago • 0 comments

Hi, First of all thanks for this amazing tool ! But I struggle to add https://github.com/tcoopman/image-webpack-loader to compress the generated assets from my SCSS files.

I almost got it by it generate the files two times. Here's the webpackConfig part of my wpackio.project.js files :

webpackConfig: (config, merge, appDir, isDev) => {
  const svgs = /\.svg$/i;

  let { fileRulesNonStyle, fileRulesStyle } = getFileLoaderForJsAndStyleAssets(
    appDir,
    isDev
  );

  fileRulesNonStyle.use = [
    {
      loader: fileLoader,
      options: getFileLoaderOptions(appDir, isDev, false)
    },
    "image-webpack-loader"
  ];

  fileRulesStyle.use = [
    {
      loader: fileLoader,
      options: getFileLoaderOptions(appDir, isDev, true)
    },
    "image-webpack-loader"
  ];

  const override = {
    module: {
      rules: [
        {
          test: svgs,
          use: [
            {
              loader: fileLoader,
              options: getFileLoaderOptions(appDir, isDev, false)
            },
            "image-webpack-loader"
          ],
          issuer: issuerForNonStyleFiles
        },
        {
          test: svgs,
          use: [
            {
              loader: fileLoader,
              options: getFileLoaderOptions(appDir, isDev, true)
            },
            "image-webpack-loader"
          ],
          issuer: issuerForStyleFiles
        },
        fileRulesNonStyle,
        fileRulesStyle
      ]
    }
  };

  return merge(config, override);
}

Can I have some help please ?

Deejay-Ste avatar Feb 26 '20 18:02 Deejay-Ste