Merge branch 'ujjwalguptaofficial-master'

Author: krausest

frameworks/keyed/mahal/config/webpack/base.config.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const MahalPlugin = require('mahal-webpack-loader/lib/plugin');
+const MahalPlugin = require('@mahaljs/webpack-loader/lib/plugin');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
@@ -19,22 +19,32 @@ module.exports = {
                 test: /\.mahal?$/,
                 // loader: 'mahal-webpack-loader',
                 use: {
-                    loader: require.resolve('mahal-webpack-loader')
+                    loader: require.resolve('@mahaljs/webpack-loader')
                 },
                 exclude: /node_modules/
             },
             {
                 test: /\.css?$/,
                 use: [
-                    'style-loader',
+                    isEnvProduction ? {
+                        loader: MiniCssExtractPlugin.loader,
+                        options: {
+                            esModule: false,
+                        },
+                    } : 'style-loader',
                     'css-loader'
                 ],
             },
             {
                 test: /\.s[ac]ss$/i,
                 use: [
                     // Creates `style` nodes from JS strings
-                    'style-loader',
+                    isEnvProduction ? {
+                        loader: MiniCssExtractPlugin.loader,
+                        options: {
+                            esModule: false,
+                        },
+                    } : 'style-loader',
                     // Translates CSS into CommonJS
                     "css-loader",
                     // Compiles Sass to CSS
@@ -73,8 +83,8 @@ module.exports = {
         },
     },
     output: {
-        filename: isEnvProduction ? 'js/[name].js' : 'js/[name].js',
-        chunkFilename: isEnvProduction ? 'js/[name].chunk.js' : 'js/[name].chunk.js',
+        filename: isEnvProduction ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
+        chunkFilename: isEnvProduction ? 'js/[name].[contenthash:8].chunk.js' : 'js/[name].chunk.js',
         path: path.resolve(rootFolder, 'dist'),
         publicPath: '/'
     },
@@ -83,8 +93,8 @@ module.exports = {
             lang: 'ts'
         }),
         new HtmlWebPackPlugin({
-            // cache: true,
-            // hash: true,
+            cache: true,
+            hash: true,
             template: 'src/index.html',
             minify: {
                 collapseWhitespace: true,
@@ -95,15 +105,9 @@ module.exports = {
             }
         }),
         new CleanWebpackPlugin(),
-        new CopyPlugin({
-            patterns: [{
-                from: './assets/',
-                to: ''
-            }]
-        }),
-        // new MiniCssExtractPlugin({
-        //     filename: 'css/[name].css',
-        //     chunkFilename: 'css/[name].chunk.css',
-        // })
+        new MiniCssExtractPlugin({
+            filename: isEnvProduction ? 'css/[name].[contenthash:8].css' : 'css/[name].css',
+            chunkFilename: isEnvProduction ? 'css/[name].[contenthash:8].chunk.css' : 'css/[name].chunk.css',
+        })
     ]
 };

frameworks/keyed/mahal/config/webpack/dev.config.js

@@ -5,5 +5,8 @@ const baseConfig = require('./base.config');
 module.exports = merge(baseConfig, {
     devServer: {
         historyApiFallback: true,
+        static: {
+            directory: path.join(__dirname, '../../assets'),
+        },
     },
 });

frameworks/keyed/mahal/config/webpack/prod.config.js

@@ -1,11 +1,53 @@
 const { merge } = require('webpack-merge')
 const baseConfig = require('./base.config')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 const prod = merge(baseConfig, {
-    mode: 'production',
+    mode: process.env.NODE_ENV || 'development',
     devtool: false,
     output: {
-        publicPath: 'dist/',
+        publicPath: '/frameworks/keyed/mahal/dist/',
+        filename: 'js/[name].[contenthash].bundle.js',
+    },
+    optimization: {
+        minimize: true,
+        minimizer: [`...`, new CssMinimizerPlugin()],
+        runtimeChunk: {
+            name: 'runtime',
+        },
+        splitChunks: {
+            chunks: 'all',
+            maxInitialRequests: Infinity,
+            minSize: 100000,
+            maxSize: 1000000,
+            cacheGroups: {
+                vendor: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name(module) {
+                        // get the name. E.g. node_modules/packageName/not/this/part.js
+                        // or node_modules/packageName
+                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+                        // console.log('package', packageName);
+                        // npm package names are URL-safe, but some servers don't like @ symbols
+                        return `npm.${packageName.replace('@', '')}`;
+                    },
+                },
+            },
+        },
+    },
+    plugins: [
+        new CopyPlugin({
+            patterns: [{
+                from: './assets/',
+                to: ''
+            }]
+        })
+    ],
+    performance: {
+        hints: false,
+        maxEntrypointSize: 512000,
+        maxAssetSize: 512000,
     },
 })
 

frameworks/keyed/mahal/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Mahal</title><link href="/css/currentStyle.css" rel="stylesheet"><script defer="defer" src="dist/js/main.js"></script></head><body><span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span><div id="main"></div></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Mahal</title><link href="/css/currentStyle.css" rel="stylesheet"><script defer="defer" src="/frameworks/keyed/mahal/dist/js/runtime.8bf36938d9012d6ced34.bundle.js?b83370a6094779c319a5"></script><script defer="defer" src="/frameworks/keyed/mahal/dist/js/main.b7078a368dbf8712eb94.bundle.js?b83370a6094779c319a5"></script><link href="/frameworks/keyed/mahal/dist/css/main.31d6cfe0.css?b83370a6094779c319a5" rel="stylesheet"></head><body><span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span><div id="main"></div></body></html>