Some structure changes; added naviagation; added helpers

webpack.config.js

@@ -1,56 +1,103 @@
+const os = require('os')
 const path = require('path')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const {CleanWebpackPlugin} = require('clean-webpack-plugin')
-const TerserPlugin = require("terser-webpack-plugin")
+const glob = require('glob')
 
-let mode = 'development', target = 'web'
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const PurgeCSSPlugin = require('purgecss-webpack-plugin')
+const svgToMiniDataURI = require('mini-svg-data-uri')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const CSSMQPackerPlugin = require('css-mqpacker-webpack-plugin')
+
+let mode = 'development', target = 'web', isProd = false
+const babelExclude = /(node_modules|bower_components)/
 
 if (process.env.NODE_ENV === 'production') {
   mode = 'development'
   target = 'browserslist'
+  isProd = true
 }
 
+const isDev = process.env.NODE_ENV !== 'production'
+
 const plugins = [
   new CleanWebpackPlugin(),
   new MiniCssExtractPlugin(),
+  new PurgeCSSPlugin({
+    paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
+    //only: ['bundle', 'vendor']
+  }),
   new HtmlWebpackPlugin({
     template: './src/index.html',
-    inject: 'body'
+    inject: 'body',
   }),
 ]
 
-console.log( process.env.SOURCE_MAP_ENV )
+const stylesLoaders = loader => {
+  const loaders = [
+    isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
+    'css-loader',
+    {
+      loader: 'postcss-loader',
+      options: {
+        postcssOptions: {
+          ident: 'postcss',
+          plugins: [
+            require('postcss-preset-env'),
+          ],
+        },
+      },
+    },
+  ]
+
+  if (loader) {
+    loaders.push(loader)
+  }
+
+  return loaders
+}
 
 module.exports = {
   mode: mode,
   target: target,
   module: {
     rules: [
-      {
-        test: /\.(jpe?g|png|gif|svg)$/i,
-        type: "asset",
-      },
       {
         test: /\.css$/i,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-            // This is required for asset imports in CSS, such as url()
-            options: { publicPath: '' },
-          },
-          'css-loader',
-          ///"postcss-loader",
-          // according to the docs, sass-loader should be at the bottom, which
-          // loads it first to avoid prefixes in your sourcemaps and other issues.
-          //"sass-loader",
-        ],
+        use: stylesLoaders(),
       },
       {
-        test: /\.js$/,
-        exclude: /node_modules/,
+        test: /\.s[ac]ss$/i,
+        use: stylesLoaders('sass-loader'),
+      },
+      {
+        test: /\.m?js$/i,
+        exclude: babelExclude,
         use: {
           loader: 'babel-loader',
+          options: {
+            presets: [
+              '@babel/preset-env',
+            ],
+            plugins: [
+              '@babel/plugin-proposal-class-properties',
+            ],
+          },
+        },
+      },
+      {
+        test: /\.(jpe?g|webp|png|gif|svg)$/i,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.(svg)$/i,
+        type: 'asset/inline',
+        generator: {
+          dataUrl: content => {
+            content = content.toString()
+            return svgToMiniDataURI(content)
+          },
         },
       },
     ],
@@ -61,20 +108,29 @@ module.exports = {
     filename: '[name].[hash].js',
   },
   plugins: plugins,
-  devtool: mode === 'production' ? 'source-map' : ( process.env.SOURCE_MAP_ENV ? 'source-map' : false ),
+  devtool: mode === 'production' ? 'source-map' : (process.env.SOURCE_MAP_ENV ? 'eval-cheap-module-source-map' : false),
   optimization: {
-    minimize: true,
+    minimize: isProd,
+    splitChunks: {
+      chunks: 'all',
+    },
     minimizer: [
-      new TerserPlugin({
-        extractComments: true,
-        terserOptions: {
-          ecma: 5,
-          compress: {
-            drop_console: mode === 'production',
-          },
+      `...`,
+      new CssMinimizerPlugin({
+        parallel: os.cpus().length,
+        minimizerOptions: {
+          preset: [
+            'default', // for advanced need to run `npm i -D cssnano-preset-advanced`
+            {
+              discardComments: { removeAll: true },
+            },
+          ],
         },
       }),
-
+      new CSSMQPackerPlugin({
+        test: /\.css$/i,
+        sort: true,
+      }),
     ],
   },
   devServer: {
@@ -82,10 +138,5 @@ module.exports = {
     compress: true,
     port: 1976,
     liveReload: true,
-    /*overlay: {
-      warnings: true,
-      errors: true,
-    }*/
-
   },
 }