add mini css extract

package.json

@@ -46,6 +46,7 @@
         "jest": "29.6.1",
         "jsdom": "22.1.0",
         "lodash": "^4.17.21",
+        "mini-css-extract-plugin": "^2.9.1",
         "nanospinner": "^1.1.0",
         "postcss": "^8.4.39",
         "postcss-loader": "^8.1.1",

webpack.config.js

@@ -1,22 +1,31 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 
 const ESM_BUILD = process.env.ESM_BUILD === 'true';
 
+const replaceStyleLoaderToCssExtract = (moduleRules) => {
+    moduleRules.forEach((loaderRule) => {
+        if (!loaderRule.use) {
+            return;
+        }
+        loaderRule.use.forEach((loader, index) => {
+            if (loader === 'style-loader') {
+                loaderRule.use[index] = MiniCssExtractPlugin.loader;
+            }
+        });
+    });
+};
+
 module.exports = (args, env, dir = process.cwd()) => {
     const coreWebpackModule = require('@mappable-world/mappable-cli/webpack.config')(args, env, dir);
+
     if (ESM_BUILD) {
-        coreWebpackModule.experiments = {
-            outputModule: true
-        };
-        coreWebpackModule.entry = {
-            index: {
-                import: './src/index.ts',
-                library: {
-                    type: 'module'
-                }
-            }
-        };
+        coreWebpackModule.experiments = {outputModule: true};
+        coreWebpackModule.entry = {index: {import: './src/index.ts', library: {type: 'module'}}};
         coreWebpackModule.output.path = path.resolve(dir, 'dist/esm');
+        coreWebpackModule.plugins = [new MiniCssExtractPlugin()];
+        replaceStyleLoaderToCssExtract(coreWebpackModule.module.rules);
     }
+
     return coreWebpackModule;
 };