Compressing files copied by 'copy-webpack-plugin'

[StasD]

Hello,

This is my setup:

let CompressionPlugin = require('compression-webpack-plugin');
let CopyWebpackPlugin = require('copy-webpack-plugin');
...
        new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]),

        new CompressionPlugin({
            asset: '[path].gz',
            algorithm: 'gzip',
            test:  /\.(js|css|map|po)$/,
            // threshold: 10240,
            minRatio: 10  // 0.8
        }),

The problem is that .po files, which are in src/assets/translations, and which are copied by the CopyWebpackPlugin don't get compressed by the CompressionPlugin.
Not sure who's plugin fault it is. :)
Is it possible to get it work as intended?

Thanks!

[nmcclay]

I am also interested in a solution to this problem, not certain where the issue stems from...

[nmcclay]

I can confirm that this PR fixed by issues with the following config:

plugins: [
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, '../my-other-project/dist'),
      to: 'static'
    }]),
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.(js|html|css)$/
    })
  ]

[alexander-akait]

@nmcclay why don't use https://github.com/perchlayer/po-loader or https://github.com/queicherius/i18next-po-loader for this purpose?

[nmcclay]

The problem was the order of execution for generating gzip compression after copying an external SPA app directory in my case, not moving .po files. The issue just manifests as the same issue, that the CompressorPlugin wasn't running AFTER the copy plugin. Using this fork effectively fixed that load issue in my case.

[keemor]

@nmcclay Can you say what actually solved you problem?

My config:

new CopyWebpackPlugin([
    {
        from: path.join(__dirname, 'dev/json/info.json'),
        to: 'json/info.json'
    }
]),
new CompressionPlugin({
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.js$|\.json$|\.css$|\.html$/,
    deleteOriginalAssets: true
})

info.json is not gzipped in this case

[nmcclay]

Its either that your path configuration is too rigid for CopyWebpackPlugin, or your CompressionPlugin test is incorrect, not sure which. This configuration works with .json files for me:

plugins: [
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, '../my-other-project/dist'),
      to: 'static'
    }]),
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.(js|css|json)$/
    })
  ]

[nmcclay]

dependencies, note that I'm using aforementioned forked version of compression-webpack-plugin:

"webpack": "^3.4.1",
"compression-webpack-plugin": "github:ijpiantanida/compression-webpack-plugin#emit-event",
"copy-webpack-plugin": "^4.0.1",

[keemor]

This helped and json is gzipped:

"compression-webpack-plugin": "github:ijpiantanida/compression-webpack-plugin#emit-event",

but now flag deleteOriginalAssets doesn't work.

Thanks for the tip

[ashwinirajput]

I have also same problem angular4 component bundling not working in firefox fix is below
Chrome/63.0.3239.132 Safari/537.36
but not working with Firefox/57.0
app.get('*.js', function (req, res, next) { req.url = req.url + '.gz'; res.set('Content-Encoding', 'gzip'); res.set('Content-Type', 'text/javascript'); next(); });

[Jaxenormus]

I'm still having this issue, i have tried downgrading using the forked repo and nothing has this been fixed yet?

Dependencies

    "compression-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^6.0.3",

webpack.config.js

const HtmlWebPackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const MinifyPlugin = require('babel-minify-webpack-plugin');

module.exports = {
  context: __dirname,
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    publicPath: '/',
  },
  devServer: {
    historyApiFallback: true,
  },
  resolve: {
    extensions: ['.js', '.jsx', '.less', '.css'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          plugins: [['import', { libraryName: 'antd', style: true }]],
        },
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [autoprefixer({})],
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: 'url-loader?limit=10000&name=img/[name].[ext]',
      },
    ],
  },
  plugins: [
    new MinifyPlugin(),
    new ManifestPlugin({ fileName: 'file-manifest.json' }),
    new CopyPlugin([
      {
        from: 'public',
        to: 'dist',
        globOptions: {
          ignore: ['**/index.html'],
        },
      },
    ]),
    new CompressionPlugin({
      algorithm: 'gzip',
      cache: false,
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: false,
    }),
    new CompressionPlugin({
      filename: '[path].br[query]',
      algorithm: 'brotliCompress',
      test: /\.(js|css|html|svg)$/,
      compressionOptions: {
        level: 11,
      },
      cache: false,
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: false,
    }),
    new HtmlWebPackPlugin({
      template: path.resolve(__dirname, 'public/index.html'),
      filename: 'index.html',
    }),
  ],
};