Generate a separate CSS bundle for IE with Oldie, PostCSS and Webpack

I'm using Webpack, Extract Text Plugin and PostCSS to generate my CSS bundle. I use Html Webpack Plugin to generate an index.html file. This is my webpack.config.js:

// imports

module.exports = {
  // entry point, etc.
  module: {
    loaders: [
      // other loaders here
      {
        test: /\.scss/,
        loader: debug ? 'style-loader!css-loader!postcss-loader!sass-loader' :
          ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader!sass-loader' })
      },
      {
        test: /\.css$/,
        loader: debug ? 'style-loader!css-loader!postcss-loader' :
          ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader' })
      },
    ]
  },
  plugins: [
    // other plugins here
    new ExtractTextPlugin('css/bundle.min.css'),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),
    new HtmlWebpackPlugin({
      template: './dev/index.ejs',
    }),
  ],
};

My postcss.config.js:

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-object-fit-images'),
    require('oldie')({
      opacity: {
        method: 'copy'
      },
      rgba: {
        method: 'clone'
      }
    })
  ]
};

I set RGBA and opacity options to copy the original rules. I tried to do the same with UnMQ (postcss to remove media queries for IE) but couldn't find any option to copy the original media queries. I also tried to disable it:

require('oldie')({
  opacity: {
    method: 'copy'
  },
  rgba: {
    method: 'clone'
  },
  unmq: {
    disable: true
  }
})

Media queries still don't work in Google chrome and Firefox unless I remove oldie from postcss.config.js. Now I want to try generating a separate CSS bundle for IE and include it in my index.html similar to the example given on the Oldie website:

<!--[if gt IE 8]><!--><link href="style.css" rel="stylesheet"><!--<![endif]-->
<!--[if lte IE 8]><link href="style.oldie.css" rel="stylesheet"><![endif]-->

If this is not possible, please suggest another way I can make Oldie work for IE, but not affect media queries for other browsers that support it.

Add a preset.

Create postcss.config.js file.

Configure the following to allow transpile:

module.exports = {
    plugins: [
        require("postcss-preset-env")
    ]
};

However, it won't work unless you've created a browserlist and add your targeted browser(s).

So, create a .browserslistrc file.

Configure as follow or whatever:

last 2 versions
>1%
ie11
maintained node versions
not dead

That should do.

In conclusion, you don't need Oldie. Although, if you want to use the module, Gulp uses it and it's another setup. Webpack simplies a lot already.

Let me know how it goes! :)