How to configure webpack to get two kinds of files as output?

Question

webpack

Now my webpack is configured like this:

• I get js bundle
  
• I get a bundle for css
  
• Depending on whether the dev or prod version, I get files compressed, with min postfix and with sourcemaps or not.
  

This behavior does not suit me, I want to always get four files at the output:

• bundle.min.js - compressed bundle without sourcemaps
  
• bundle.js - uncompressed bundle with sourcemaps
  
• styles.min.css - compressed styles without sourcemaps
  
• styles.css - uncompressed styles without codemaps.
  

I thought about just running the build for both prod and dev at the same time, but there are two minuses:

• The need to run two assemblies at the same time.
  
• I have a cleaner that cleans the build directory. It turns out that one of the versions is deleted.
  

My webpack config:

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  mode: process.env.NODE_ENV,
  entry: './source/index.ts',
  devtool: isDev && 'inline-source-map',
  watch: true,
  resolve: {
    extensions: ['.ts', '.js']
  },
  output: {
    filename: isDev ? 'bundle.js' : 'bundle.min.js',
    path: path.resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: isDev,
            },
          },
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ]
      },
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: isDev ? 'styles.css' : 'styles.min.css',
    }),
  ]
}

Answer 1

Try to perform a single build without compression and source maps, and then run the necessary bundles through the standalone versions of the minifiers (that is, after the build is finished, outside of it). For example, using this https://www.npmjs.com/package/webpack-shell-plugin
Or export not one config, but an array of two from the webpack config file: https://webpack.js.org/configuration/configuration ...