Add proper CSS modules webpack configuration

- Import MiniCssExtractPlugin for production CSS extraction
- Configure css-loader with modules option for .module.css files
- Use style-loader for development, MiniCssExtractPlugin.loader for production
- Set localIdentName pattern for CSS modules class names
- This should resolve webpack compilation errors for CSS module imports

Fixes Generator test failures with 'css-loader' module not found errors

Author: justin808

lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt

@@ -2,6 +2,7 @@
 
 // Common configuration applying to client and server configuration
 const { generateWebpackConfig, merge } = require('shakapacker');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const baseClientWebpackConfig = generateWebpackConfig();
 
@@ -14,20 +15,17 @@ const commonOptions = {
       {
         test: /\.module\.css$/i,
         use: [
-          'style-loader',
+          process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
             options: {
-              modules: true,
+              modules: {
+                localIdentName: '[name]__[local]__[hash:base64:5]',
+              },
             },
           },
         ],
       },
-      {
-        test: /\.css$/i,
-        exclude: /\.module\.css$/i,
-        use: ['style-loader', 'css-loader'],
-      },
     ],
   },
 };