Map: CSS bundling

-fixed eslint warnings

config/webpack-base.config.js

@@ -5,7 +5,7 @@ const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
 const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
-// const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 // const fs = require('fs');
 
 // devserver configuration
@@ -14,178 +14,161 @@ const PORT = process.env.PORT || 3000;
 
 module.exports = {
 
-    stats: {
-        colors: true
+  stats: {
+    colors: true,
+  },
+
+  devServer: {
+    hot: true,
+    inline: true,
+    contentBase: false,
+    compress: true,
+    port: PORT,
+    host: HOST,
+    watchOptions: {
+      ignored: /node_modules/,
     },
-
-    devServer: {
-        hot: true,
-        inline: true,
-        contentBase: false,
-        compress: true,
-        port: PORT,
-        host: HOST,
-        watchOptions: {
-            ignored: /node_modules/
-        },
-        overlay: {
-            warnings: true,
-            errors: true
-        },
-        clientLogLevel: 'warning',
-        historyApiFallback: {
-            disableDotRule: true
-        },
+    overlay: {
+      warnings: true,
+      errors: true,
     },
-
-    entry: {
-        genesys: [ 'babel-polyfill', /* './entrypoints/vendor.ts', */ './entrypoints/client.tsx' ]
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      disableDotRule: true,
     },
-
-    output: {
-        filename: '[name].[hash].js',
-        // chunkFilename: '[name].[hash].js',
-        path: path.join(process.cwd(), 'target/app/assets'),
-        publicPath: ''
+  },
+
+  entry: {
+    genesys: ['babel-polyfill', /* './entrypoints/vendor.ts', */ './entrypoints/client.tsx'],
+  },
+
+  output: {
+    filename: '[name].[hash].js',
+    // chunkFilename: '[name].[hash].js',
+    path: path.join(process.cwd(), 'target/app/assets'),
+    publicPath: '',
+  },
+
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    modules: [path.resolve('./src'), 'node_modules'],
+    alias: {
+      '@genesys/client': path.resolve(process.cwd(), '../genesys-ui/workspaces/client/src'),
+      '@assets': path.resolve(process.cwd(), './assets'),
     },
-
-    resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.jsx'],
-        modules: [path.resolve('./src'), 'node_modules'],
-        alias: {
-            '@genesys/client': path.resolve(process.cwd(), '../genesys-ui/workspaces/client/src'),
-            '@assets': path.resolve(process.cwd(), './assets'),
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        enforce: 'pre',
+        loader: 'eslint-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.tsx?$/,
+        use: {
+          loader: 'awesome-typescript-loader',
         },
-    },
-
-    module: {
-        rules: [
-            {
-                test: /\.tsx?$/,
-                enforce: 'pre',
-                loader:  'eslint-loader',
-                exclude: /node_modules/,
-            },
-            {
-                test: /\.tsx?$/,
-                use: {
-                    loader: 'awesome-typescript-loader',
-                },
-            },
-            {
-                test: /\.scss$/,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            modules: false
-                        },
-                    },
-                    'resolve-url-loader', {
-                        loader: 'sass-loader',
-                        options: {
-                            sourceMap: true,
-                            sassOptions: {
-                                includePaths: ['node_modules']
-                            }
-                        }
-                    }
-                ]
-            },
-            {
-                test: /\.css$/,
-                exclude: /node_modules\/react\-toolbox/,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    'css-loader'
-                ]
-            },
-            {
-                test: /\.css$/,
-                include: /node_modules\/react\-toolbox/,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            modules: true,
-                            importLoaders: 1,
-                            sourceMap: true,
-                            localIdentName: '[path][name]__[local]'
-                        }
-                    }, 'resolve-url-loader', 'postcss-loader'
-                ]
-            },
-            // fonts
-            {
-                test: /\.(woff|woff2|eot)(\?.*)?$/,
-                loader: 'file-loader?name=fonts/[hash].[ext]'
-            },
-            {
-                test: /\.ttf(\?.*)?$/,
-                loader: 'url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[hash].[ext]'
-            },
-            {
-                test: /\.(jpe?g|png|gif|svg)$/i,
-                exclude: /node_modules\/leaflet/,
-                loader: 'url-loader?limit=100000&name=images/[name].[ext]'
-            },
-            {
-                test: /\.(jpe?g|png|gif|svg)$/i,
-                include: /node_modules\/leaflet/,
-                loader: 'file-loader?limit=100000&name=images/[name].[ext]'
-            }
-        ]
-    },
-    plugins: [
-
-        new ManifestPlugin({
-            basePath: '/html/'
-        }),
-
-        // Inject scripts to app's real index.html
-
-        new HtmlWebpackPlugin({
-            title: 'Genesys', // The title to use for the generated HTML document
-            filename: 'index.html', // The file to write the HTML to
-            // minify: {...}, // Pass a html-minifier options object to minify the output
-            xhtml: true,
-            template: './entrypoints/index.html',
-            // favicon: 'favicon.ico',
-            // localesMapping: fs.readFileSync('./generated/locales/localesMapping.json', {encoding: 'utf8'}),
-        }),
-
-        // Defer/Async scripts
-        new ScriptExtHtmlWebpackPlugin({
-          defaultAttribute: 'async',
-          // async: [ 'genesys' ],
-        }),
-
-        // Keep CSS separate
-        new MiniCssExtractPlugin({
-            filename: '[name].[hash].css',
-            chunkFilename: '[name].[hash].css'
-        }),
-
-        new HtmlWebpackExcludeAssetsPlugin(),
-
-        // Used with i18next-http-backend plugin
-        // new CopyWebpackPlugin([
-        //     { from: 'src/locales', to: 'locales'},
-        // ]),
+      },
+      // {
+      //   test: /\.scss$/,
+      //   use: [
+      //     MiniCssExtractPlugin.loader,
+      //     {
+      //       loader: 'css-loader',
+      //       options: {
+      //         modules: false,
+      //       },
+      //     },
+      //     'resolve-url-loader', {
+      //       loader: 'sass-loader',
+      //       options: {
+      //         sourceMap: true,
+      //         sassOptions: {
+      //           includePaths: ['node_modules'],
+      //         },
+      //       },
+      //     },
+      //   ],
+      // },
+      {
+        test: /\.css$/,
+        // exclude: /node_modules\/react\-toolbox/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+        ],
+      },
+      // fonts
+      {
+        test: /\.(woff|woff2|eot)(\?.*)?$/,
+        loader: 'file-loader?name=fonts/[hash].[ext]',
+      },
+      {
+        test: /\.ttf(\?.*)?$/,
+        loader: 'url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[hash].[ext]',
+      },
+      {
+        test: /\.(png|jpe?g)$/,
+        use: [
+          { loader: "file-loader?name=images/[name].[ext]" },
+        ],
+      },
     ],
-
-    // optimization: {
-    //     splitChunks: {
-    //         chunks: 'all',
-    //         cacheGroups: {
-    //             vendor: {
-    //                 test: /[\\/]node_modules[\\/]/,
-    //                 name: 'vendors',
-    //                 chunks: 'all'
-    //             }
-    //         },
-    //     },
-    // }
+  },
+  plugins: [
+
+    new ManifestPlugin({
+      basePath: '/html/',
+    }),
+
+    // Inject scripts to app's real index.html
+
+    new HtmlWebpackPlugin({
+      title: 'Genesys', // The title to use for the generated HTML document
+      filename: 'index.html', // The file to write the HTML to
+      // minify: {...}, // Pass a html-minifier options object to minify the output
+      xhtml: true,
+      template: './entrypoints/index.html',
+      // favicon: 'favicon.ico',
+      // localesMapping: fs.readFileSync('./generated/locales/localesMapping.json', {encoding: 'utf8'}),
+    }),
+
+    // Defer/Async scripts
+    new ScriptExtHtmlWebpackPlugin({
+      defaultAttribute: 'async',
+      // async: [ 'genesys' ],
+    }),
+
+    // Keep CSS separate
+    new MiniCssExtractPlugin({
+      filename: '[name].[hash].css',
+      chunkFilename: '[name].[hash].css',
+    }),
+
+    new HtmlWebpackExcludeAssetsPlugin(),
+
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: './node_modules/leaflet/dist/images', to: 'images' },
+        // Used with i18next-http-backend plugin
+        // { from: 'src/locales', to: 'locales' },
+      ],
+    }),
+  ],
+
+  // optimization: {
+  //     splitChunks: {
+  //         chunks: 'all',
+  //         cacheGroups: {
+  //             vendor: {
+  //                 test: /[\\/]node_modules[\\/]/,
+  //                 name: 'vendors',
+  //                 chunks: 'all'
+  //             }
+  //         },
+  //     },
+  // }
 };

config/webpack-development.config.js

@@ -7,29 +7,29 @@ const commonConfig = require('./webpack-base.config.js');
 
 module.exports = webpackMerge.smart(commonConfig, {
 
-    mode: "development",
+  mode: "development",
 
-    devtool: "source-map",
+  devtool: "source-map",
 
-    entry: {},
+  entry: {},
 
-    plugins: [
-        new webpack.LoaderOptionsPlugin({
-            minimize: false,
-            debug: true,
-            options: {
-                tslint: {
-                    failOnHint: false
-                }
-            }
-        }),
-        new HtmlWebpackPlugin({
-            filename: 'index.html', // The file to write the HTML to
-            // minify: {...}, // Pass a html-minifier options object to minify the output
-            xhtml: true,
-            template: './entrypoints/index.html',
-        }),
-        // hot module replacement for webpack-dev-server
-        new webpack.HotModuleReplacementPlugin(),
-    ],
+  plugins: [
+    new webpack.LoaderOptionsPlugin({
+      minimize: false,
+      debug: true,
+      options: {
+        tslint: {
+          failOnHint: false,
+        },
+      },
+    }),
+    new HtmlWebpackPlugin({
+      filename: 'index.html', // The file to write the HTML to
+      // minify: {...}, // Pass a html-minifier options object to minify the output
+      xhtml: true,
+      template: './entrypoints/index.html',
+    }),
+    // hot module replacement for webpack-dev-server
+    new webpack.HotModuleReplacementPlugin(),
+  ],
 });

config/webpack-library.js

 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
 
@@ -51,6 +52,20 @@ module.exports = {
           loader: 'awesome-typescript-loader',
         },
       },
+      {
+        test: /\.css$/,
+        // exclude: /node_modules\/react\-toolbox/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+        ],
+      },
+      {
+        test: /\.(png|jpe?g)$/,
+        use: [
+          { loader: "file-loader?name=images/[name].[ext]" },
+        ],
+      },
       {
         test: /\.scss$/,
         use: [
@@ -75,6 +90,22 @@ module.exports = {
     ],
   },
 
+  plugins: [
+    // Keep CSS separate
+    new MiniCssExtractPlugin({
+      filename: '[name].[hash].css',
+      chunkFilename: '[name].[hash].css',
+    }),
+
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: './node_modules/leaflet/dist/images', to: 'images' },
+        // Used with i18next-http-backend plugin
+        // { from: 'src/locales', to: 'locales' },
+      ],
+    }),
+  ],
+
   optimization: {
     noEmitOnErrors: true,
     splitChunks: {

config/webpack-production.config.js

@@ -9,73 +9,73 @@ const commonConfig = require('./webpack-base.config.js');
 
 module.exports = webpackMerge.smart(commonConfig, {
 
-    mode: "production",
+  mode: "production",
 
-    devServer: {
-        hot: false,
-        inline: false,
-        compress: true,
-    },
+  devServer: {
+    hot: false,
+    inline: false,
+    compress: true,
+  },
 
-    plugins: [
-        new webpack.LoaderOptionsPlugin({
-            minimize: true,
-            debug: false
-        }),
-        new HtmlWebpackPlugin({
-            filename: 'index.html', // The file to write the HTML to
-            // minify: {...}, // Pass a html-minifier options object to minify the output
-            xhtml: true,
-            template: './entrypoints/index.html',
-        }),
-    ],
-    optimization: {
-        noEmitOnErrors: true,
-        splitChunks: {
-            chunks: 'all',
-            cacheGroups: {
-                vendor: {
-                    test: /[\\/]node_modules[\\/]/,
-                    name: 'vendors',
-                    chunks: 'all'
-                },
-                client: {
-                    test: /[\\/]client[\\/]/,
-                    name: 'client',
-                    chunks: 'all',
-                },
-            },
+  plugins: [
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: false
+    }),
+    new HtmlWebpackPlugin({
+      filename: 'index.html', // The file to write the HTML to
+      // minify: {...}, // Pass a html-minifier options object to minify the output
+      xhtml: true,
+      template: './entrypoints/index.html',
+    }),
+  ],
+  optimization: {
+    noEmitOnErrors: true,
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all'
+        },
+        client: {
+          test: /[\\/]client[\\/]/,
+          name: 'client',
+          chunks: 'all',
+        },
+      },
+    },
+    minimizer: [
+      //
+      new MinifyPlugin({
+        parallel: true,
+        terserOptions: {
+          ecma: undefined,
+          warnings: false,
+          parse: {},
+          compress: {},
+          mangle: true, // Note `mangle.properties` is `false` by default.
+          module: false,
+          output: null,
+          toplevel: false,
+          nameCache: null,
+          ie8: false,
+          keep_classnames: undefined,
+          keep_fnames: false,
+          safari10: false,
         },
-        minimizer: [
-            //
-            new MinifyPlugin({
-                parallel: true,
-                terserOptions: {
-                    ecma: undefined,
-                    warnings: false,
-                    parse: {},
-                    compress: {},
-                    mangle: true, // Note `mangle.properties` is `false` by default.
-                    module: false,
-                    output: null,
-                    toplevel: false,
-                    nameCache: null,
-                    ie8: false,
-                    keep_classnames: undefined,
-                    keep_fnames: false,
-                    safari10: false,
-                  },
-            }),
-            // Minify CSS
-            new OptimizeCssAssetsPlugin({
-                // cssProcessor: require('cssnano'),
-                // cssProcessorOptions: {
-                //     discardComments: {
-                //         removeAll: true
-                //     }
-                // },
-                // canPrint: true
-            }),
-        ]
-    }
+      }),
+      // Minify CSS
+      new OptimizeCssAssetsPlugin({
+        // cssProcessor: require('cssnano'),
+        // cssProcessorOptions: {
+        //     discardComments: {
+        //         removeAll: true
+        //     }
+        // },
+        // canPrint: true
+      }),
+    ]
+  }
 });

config/webpack.config.js

@@ -3,5 +3,5 @@
 // We could also look at environment vars:
 // const ENV = process.env.NODE_ENV === 'production' ? 'production' : 'development';
 module.exports = function(env) {
-    return require('./webpack-' + env + '.config.js');
+  return require('./webpack-' + env + '.config.js');
 };

entrypoints/index.html

@@ -9,9 +9,9 @@
   <meta name="author" content="Genesys Team, helpdesk@genesys-pgr.org" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
     integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+  <!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
         integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
-        crossorigin=""/>
+        crossorigin=""/> -->
 </head>
 
 <body>

package.json

@@ -58,7 +58,9 @@
     "@typescript-eslint/parser": "^2.0.0",
     "awesome-typescript-loader": "^5.0.0",
     "babel-polyfill": "^6.0.0",
+    "copy-webpack-plugin": "^6.3.2",
     "cross-env": "^7.0.0",
+    "css-loader": "^5.0.1",
     "eslint": "^6.0.0",
     "eslint-config-airbnb": "^18.0.0",
     "eslint-config-prettier": "^6.0.0",
@@ -67,6 +69,7 @@
     "eslint-plugin-jsx-a11y": "^6.0.0",
     "eslint-plugin-prefer-arrow": "^1.0.0",
     "eslint-plugin-react": "^7.0.0",
+    "file-loader": "^6.2.0",
     "html-webpack-exclude-assets-plugin": "^0.0.7",