dotenv, build:analyze, postcss-normalize, postcss-preset-env, pollyfi…

…ll using core-js and lot more improvements

babel.config.js

@@ -0,0 +1,28 @@
+module.exports = function(api) {
+    api.cache(false);
+    const presets = [
+        [
+            '@babel/preset-env',
+            {
+                useBuiltIns: 'entry',
+                corejs: { version: '3.3' }
+                //debug: true
+            }
+        ]
+    ];
+
+    let plugins = [
+        [
+            'transform-react-jsx',
+            {
+                pragma: 'm'
+            }
+        ],
+        '@babel/plugin-proposal-class-properties',
+        '@babel/plugin-transform-runtime'
+    ];
+    return {
+        presets,
+        plugins
+    };
+};

config/webpack/addons/webpack.bundleanalyze.js

@@ -0,0 +1,11 @@
+const WebpackBundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const paths = require('../paths');
+module.exports = {
+  plugins: [
+    new WebpackBundleAnalyzer({
+      analyzerMode: 'static',
+      reportFilename: paths.bundleReportPath,
+      openAnalyzer: false
+    })
+  ]
+};

config/webpack/addons/webpack.bundlevisualizer.js

@@ -0,0 +1,7 @@
+const Visualizer = require('webpack-visualizer-plugin');
+
+module.exports = {
+  plugins: [
+    new Visualizer()
+  ]
+};

config/webpack/paths.js

@@ -0,0 +1,11 @@
+const { resolve } = require('path');
+
+module.exports = {
+    contextPath: resolve(__dirname, '../', '../', 'src'),
+    outputPath: resolve(__dirname, '../', '../', 'dist'),
+    bundleReportPath: resolve(__dirname, '../', '../', 'dist', 'report.html'),
+    entryPath: resolve(__dirname, '../', '../', 'src/index.js'),
+    templatePath: resolve(__dirname, '../', '../', 'src/index.html'),
+    envDevPath: resolve(__dirname, '../', '../', '.env.development'),
+    envPath: resolve(__dirname, '../', '../', '.env')
+};

config/webpack/rules.js

@@ -0,0 +1,81 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const postcssNormalize = require('postcss-normalize');
+const imageInlineSizeLimit = 10000;
+const fontInlineSizeLimit = 10000;
+
+module.exports = [
+    {
+        test: /\.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
+        loader: 'url-loader',
+        options: {
+            limit: fontInlineSizeLimit,
+            name: '[name].[ext]',
+            publicPath: '../fonts/',
+            outputPath: 'fonts/'
+        }
+    },
+    {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+            {
+                loader: MiniCssExtractPlugin.loader,
+                options: {
+                    hmr: process.env.NODE_ENV === 'development',
+                    // if hmr does not work, this is a forceful method.
+                    reloadAll: process.env.NODE_ENV === 'development'
+                }
+            },
+            {
+                loader: 'css-loader'
+            },
+            {
+                loader: 'postcss-loader',
+                options: {
+                    ident: 'postcss',
+                    plugins: () => [
+                        require('postcss-flexbugs-fixes'),
+                        require('postcss-preset-env')({
+                            autoprefixer: {
+                                flexbox: 'no-2009'
+                            },
+                            stage: 3
+                        }),
+                        postcssNormalize()
+                    ]
+                }
+            },
+            {
+                loader: 'sass-loader'
+            }
+        ]
+    },
+    {
+        test: /\.(jpe?g|png|gif)$/,
+        use: {
+            loader: 'url-loader',
+            options: {
+                limit: imageInlineSizeLimit,
+                name: '[name].[hash:8].[ext]',
+                publicPath: '../images/',
+                outputPath: 'images/'
+            }
+        }
+    },
+    {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+            loader: 'babel-loader'
+        }
+    },
+    {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url-loader',
+        options: {
+            limit: 1000,
+            name: '[name].[hash:8].[ext]',
+            publicPath: '../images/',
+            outputPath: 'images/'
+        }
+    }
+];

config/webpack/webpack.common.js

@@ -0,0 +1,26 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const paths = require('./paths');
+const rules = require('./rules');
+
+module.exports = {
+    context: paths.contextPath,
+    entry: {
+        main: paths.entryPath,
+    },
+    module: {
+        rules
+    },
+    resolve: {
+        modules: ['src', 'node_modules'],
+        extensions: ['*', '.js', '.scss', '.css']
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: paths.templatePath,
+        }),
+        new webpack.ProvidePlugin({
+            m: 'mithril' //Global access
+        }),
+    ]
+};

webpack.dev.js → config/webpack/webpack.development.js

@@ -1,44 +1,28 @@
 const webpack = require('webpack');
-const merge = require('webpack-merge');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const Dotenv = require('dotenv-webpack');
+const paths = require('./paths');
 
-const common = require('./webpack.common.js');
-
-module.exports = merge(common, {
+module.exports = {
     mode: 'development',
-    devtool: 'source-map',
+    devtool: 'cheap-module-source-map',
     devServer: {
         hot: true,
-        contentBase: './dist',
+        contentBase: paths.outputPath,
         port: 3000,
         proxy: {
-            '/api': 'http://localhost:3001',
+            '/api': 'http://localhost:3001'
         },
+        open: true,
         /*overlay: {
             errors: true,
             warnings: true,
         },*/
+        compress: true,
+        historyApiFallback: true
     },
     module: {
         rules: [{
-            test: /\.(sa|sc|c)ss$/,
-            use: [{
-                loader: MiniCssExtractPlugin.loader,
-                options: {
-                    hmr: true,
-                    // if hmr does not work, this is a forceful method.
-                    reloadAll: true,
-                },
-            }, {
-                loader: 'css-loader',
-                options: { sourceMap: true },
-            }, {
-                loader: 'postcss-loader',
-            }, {
-                loader: 'sass-loader',
-                options: { sourceMap: true },
-            }],
-        }, {
             test: /\.js$/,
             enforce: 'pre',
             exclude: /node_modules/,
@@ -52,15 +36,28 @@ module.exports = merge(common, {
                 failOnError: false,
                 // Toggle autofix
                 fix: false,
-                formatter: require('eslint/lib/cli-engine/formatters/stylish'),
-            },
-        }],
+                formatter: require('eslint/lib/cli-engine/formatters/stylish')
+            }
+        }]
+    },
+    output: {
+        path: paths.outputPath,
+        filename: 'js/[name].js',
+        chunkFilename: 'js/[name].js'
     },
     plugins: [
+        new Dotenv({
+            path: paths.envDevPath // Path to .env file (this is the default)
+        }),
         new MiniCssExtractPlugin({
             filename: 'css/[name].css',
-            chunkFilename: 'css/[id].css',
+            chunkFilename: 'css/[id].css'
         }),
-        new webpack.HotModuleReplacementPlugin(),
+        new webpack.HotModuleReplacementPlugin()
     ],
-});
+    optimization: {
+        splitChunks: {
+            chunks: 'all'
+        }
+    }
+};

config/webpack/webpack.production.js

@@ -0,0 +1,52 @@
+const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const Dotenv = require('dotenv-webpack');
+const paths = require('./paths');
+
+module.exports = {
+    mode: 'production',
+    devtool: 'source-map',
+    output: {
+        path: paths.outputPath,
+        filename: 'js/[name]-[contenthash:8].js',
+        chunkFilename: 'js/[name]-[contenthash:8].js'
+    },
+    plugins: [
+        new webpack.HashedModuleIdsPlugin(), // so that file hashes don't change unexpectedly
+        new CleanWebpackPlugin(),
+        new Dotenv({
+            path: paths.envPath // Path to .env file (this is the default)
+        }),
+        new MiniCssExtractPlugin({
+            filename: 'css/[name]-[contenthash:8].css',
+            chunkFilename: 'css/[id]-[contenthash:8].css'
+        })
+    ],
+    optimization: {
+        runtimeChunk: 'single',
+        splitChunks: {
+            chunks: 'all',
+            maxInitialRequests: Infinity,
+            minSize: 30000,
+            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];
+
+                        // npm package names are URL-safe, but some servers don't like @ symbols
+                        return `vendor.${packageName.replace('@', '')}`;
+                    }
+                }
+            }
+        },
+        minimizer: [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})]
+    }
+};