fixed webpack again

webpack.config.js

@@ -1,27 +1,19 @@
 /* eslint-disable import/no-extraneous-dependencies */
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const path = require('path');
 
 module.exports = {
   mode: process.env.NODE_ENV,
   entry: './src/index.js',
-
   output: {
-    path: path.resolve(__dirname, 'dist'),
+    path: path.join(__dirname, 'dist'),
     publicPath: '/dist/',
-    filename: `index.js`,
+    filename: 'index.js',
+    library: '@tip-wlan/wlan-cloud-ui-library',
     libraryTarget: 'umd',
-    library: {
-      name: '@tip-wlan/wlan-cloud-ui-library',
-      type: 'umd',
-    },
     umdNamedDefine: true,
   },
 
-  target: 'node', // ingore all dependencies
-
   externals: [
     {
       react: {
@@ -72,31 +64,22 @@ module.exports = {
         use: ['babel-loader', 'eslint-loader'],
       },
       {
-        test: /\.(css|scss)$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: false,
-              localsConvention: 'camelCase',
-              modules: {
-                localIdentName: '[local]___[hash:base64:5]',
-              },
-            },
-          },
-          'sass-loader',
-        ],
+        // Preprocess 3rd party .css files located in node_modules
+        test: /\.css$/,
+        include: /node_modules/,
+        use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.less$/,
         use: [
-          MiniCssExtractPlugin.loader,
+          {
+            loader: 'style-loader',
+          },
           {
             loader: 'css-loader',
           },
           {
-            loader: 'less-loader', // compiles Less to CSS
+            loader: 'less-loader',
             options: {
               lessOptions: {
                 javascriptEnabled: true,
@@ -105,24 +88,46 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.(css|scss)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+              },
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'sass-loader',
+          },
+        ],
+      },
     ],
   },
 
   resolve: {
-    modules: ['node_modules', 'src'],
+    modules: [path.resolve('./node_modules'), path.resolve('./src')],
     alias: {
-      app: path.resolve(__dirname, '../', 'src'),
+      src: path.resolve(__dirname, './src'),
+      react: path.resolve(__dirname, './node_modules/react'),
+      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
+      antd: path.resolve(__dirname, './node_modules/antd'),
+      '@ant-design/icons': path.resolve(__dirname, './node_modules/@ant-design/icons'),
+      'prop-types': path.resolve(__dirname, './node_modules/prop-types'),
+      'react-router-dom': path.resolve(__dirname, './node_modules/react-router-dom'),
     },
   },
 
   plugins: [
     new CleanWebpackPlugin(),
 
-    new MiniCssExtractPlugin({
-      filename: `css/[name].css`,
-      chunkFilename: `css/[hash].css`,
-    }),
-
     // new BundleAnalyzerPlugin(),
   ],
 };