title: mini-css-extract-plugin does not load css if it is not declared via dynamic import
body: <p>I have very basic webpack + mini-css-extract-plugin project (you can found it <a href="https://github.com/sprilukin/mini-css-extract-plugin-issue" rel="nofollow noreferrer">here</a>).</p>
  <p>Here is <code>webpack.config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>const path = require(&quot;path&quot;);
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = {
      resolve: {
          modules: [path.resolve(process.cwd(), 'node_modules')]
      },
  
      module: {
          rules: [
              // file loader allows to copy file to the build folder and form proper url
              // usually images are used from css files, see css loader below
              {
                  test: /\.png$/,
                  exclude: /node_modules/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              name: &quot;_assets/[name].[ext]&quot;
                          }
                      }
                  ]
              },
              // css files are processed to copy any dependent resources like images
              // then they copied to the build folder and inserted via link tag
              {
                  test: /\.css$/i,
                  sideEffects: true,
                  exclude: /node_modules/,
                  // for tests we use simplified raw-loader for css files
                  use: [
                      {
                          loader: MiniCssExtractPlugin.loader,
                          options: {
                              // public path has changed so url(...) inside css files use relative pathes
                              // like: url(../_assets/image.png) instead of absolute urls
                              publicPath: '../',
                          }
                      },
                      'css-loader'
                  ]
              }
          ]
      },
      plugins: [
          // plugin helps to properly process css files which are imported from the source code
          new MiniCssExtractPlugin({
              // Options similar to the same options in webpackOptions.output
              // both options are optional
              filename: '_assets/[name].css',
              chunkFilename: '_assets/[id].css'
          })
      ],
      entry: {
          'test': &quot;./src/test&quot;
      },
      output: {
          path: path.resolve(process.cwd(), `public`),
          publicPath: '',
          filename: '[name].js',
          chunkFilename: '_chunks/chunk.[name].js'
      }
  };
  </code></pre>
  <p>main entry file <code>test.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>import './css/testCss.css';
  
  console.log('Loaded');
  </code></pre>
  <p>When i run webpack build i got the following output structure:</p>
  <pre><code>/
  |-test.js
  |-_assets/
  | |-test.css
  </code></pre>
  <p>When i include this js bundle into html i would expect that test.js bundle will load <code>test.css</code> file dynamically but this is not the case - js bundle works ok, but css file is not loaded at all.</p>
  <p>It is only loaded when i modify source of the <code>test.js</code> like so:</p>
  <pre class="lang-js prettyprint-override"><code>import('./css/testCss.css');  // &lt;--------- NOTE: dynamic import here
  
  console.log('Loaded');
  </code></pre>
  <p>in this case after webpack build i got the following output:</p>
  <pre><code>/
  |-test.js
  |-_assets/
  | |-0.css
  |-_chunks/
  | |-chunk.0.js
  </code></pre>
  <p>and when i load this js bundle in html - it loads both <code>chink.0.js</code> and <code>0.css</code></p>
  <p><strong>MAIN QUESTION:</strong> Is dynamic import the only correct way to include css into my js files via <code>mini-css-extract-plugin</code>?</p>
  <p>Because in documentation they say yo use normal static import like <code>import &quot;./test.css&quot;</code></p>
  <p>my environement info:</p>
  <pre><code>node version: v14.12.0
  webpack version: 4.44.1 (also tested on 5.2.0)
  mini-css-extract-plugin version 1.1.2
  </code></pre>