title: webpack mini-css-extract-plugin => output multiple css-files on single entry
body: <p>How can I setup webpack for my gutenberg blocks to extract multiple css files and bundle these based on the name of the stylesheets.</p>
  
  <p>Zack Gordon used the Extract Text Plugin for this with webpack 3, and that worked like a charm. But with webpack 4 I had to switch to the mini-css-extract-plugin, in which I can't get this to work anymore.</p>
  
  <p>See my current setup below, so you can see what I'm trying to do.</p>
  
  <p>This is my project folder:</p>
  
  <pre><code>Plugin folder
  |-- [src]
  |   |-- [block1]
  |   |   |-- block1.js
  |   |   |-- style.scss
  |   |   `-- editor.scss
  |   |-- [block2]
  |   |   |-- block2.js
  |   |   |-- style.scss
  |   |   `-- editor.scss
  |   `-- index.js
  `-- [build]
      |-- index.js
      |-- style.build.css
      `-- editor.build.css
  </code></pre>
  
  <p>In block1.js / block2.js:</p>
  
  <pre><code>import './style.scss'
  import './editor.scss'
  </code></pre>
  
  <p>In index.js:</p>
  
  <pre><code>import './block1'
  import './block2'
  </code></pre>
  
  <p>In webpack.config.js:</p>
  
  <pre><code>const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = {
      ...defaultConfig,
      optimization: {
          ...defaultConfig.optimization,
          splitChunks: {
              cacheGroups: {
                  style: {
                      name: 'style',
                      test: /style\.s?css$/,
                      chunks: 'all',
                      enforce: true,
                  },
                  editor: {
                      name: 'editor',
                      test: /editor\.s?css$/,
                      chunks: 'all',
                      enforce: true,
                  },
              },
          },
      },
      plugins: [
          ...defaultConfig.plugins,
          new MiniCssExtractPlugin({
              filename: 'blocks.[name].build.css'
              }),
      ],
      module: {
          ...defaultConfig.module,
          rules: [
              ...defaultConfig.module.rules,
              {
                  test: /\.s?css$/,
                  exclude: /node_modules/,
                  use: [
                      MiniCssExtractPlugin.loader,
                      'css-loader',
                      'postcss-loader',
                      'sass-loader'
                  ],
              },
  
          ]
      },
  };
  </code></pre>
  
  <p>Expected output:</p>
  
  <pre><code>[build]
  |-- blocks.editor.build.css
  |-- index.js
  |-- blocks.style.build.css
  </code></pre>
  
  <p>Current output:</p>
  
  <pre><code>[build]
  |-- blocks.editor.build.css
  |-- editor.js
  |-- index.js
  |-- blocks.style.build.css
  |-- style.js
  `-- (...and indentical map files)
  </code></pre>
  
  <p>The current setup spits out two extra js-files I don't need (style.js/editor.js), but the big problem is that it also causes the block not to load in Wordpress. It does load when I'm not using splitChunks, but then all css is bundled in a single file... and I need two.</p>
  
  <p>Comparing:
  index.js without splitChunks:</p>
  
  <pre><code>/******/    // Load entry module and return exports
  /******/    return __webpack_require__(__webpack_require__.s = "./src/index.js");
  /******/ })
  </code></pre>
  
  <p>index.js with splitChunks:</p>
  
  <pre><code>/******/    // add entry module to deferred list
  /******/    deferredModules.push(["./src/index.js","editor","style"]);
  /******/    // run deferred modules when ready
  /******/    return checkDeferredModules();
  /******/ })
  </code></pre>