fix: Fix webpack 5 usage with mini-css-extract-plugin (#42)

It looks like if the plugin is used with mini-css-extract-plugin in webpack 5, `tap` can trigger multiple times. It should trigger only once.

Co-authored-by: Artem Sapegin <artem@sapegin.ru>

Author: bebraw

example/package-lock.json

@@ -3,6 +3,8 @@
     "build": "wp"
   },
   "dependencies": {
+    "css-loader": "^5.0.0",
+    "mini-css-extract-plugin": "^1.1.0",
     "webpack-nano": "^1.1.0"
   },
   "main": "./src/index.js"

example/package.json

@@ -1,3 +1,5 @@
+import './main.css';
+
 const component = (text = 'Hello world') => {
 	const element = document.createElement('div');
 	element.innerHTML = text;

example/src/index.js

@@ -0,0 +1,3 @@
+body {
+	background: orange;
+}

example/src/main.css

@@ -1,7 +1,22 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { MiniHtmlWebpackPlugin } = require('../');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
 	mode: 'production',
-	plugins: [new MiniHtmlWebpackPlugin()],
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: [MiniCssExtractPlugin.loader, 'css-loader'],
+			},
+		],
+	},
+	plugins: [
+		new MiniHtmlWebpackPlugin(),
+		new MiniCssExtractPlugin({
+			filename: '[name].css',
+		}),
+	],
 };