Update webpack config

Motivation: update webpack.config.js w/ new plugins & bring in line with master

build/config/webpack.config.js

@@ -1,12 +1,12 @@
 const webpack = require('webpack');
 const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const { CheckerPlugin } = require('awesome-typescript-loader');
-const dir = require('node-dir');
 const md5file = require('md5-file');
 const crypto = require('crypto');
+const glob = require('glob');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
 setBuildEnvironment();
 
@@ -25,10 +25,9 @@ function setBuildEnvironment() {
 
 async function getWebpackPlugins() {
   const plugins = [
-    new CheckerPlugin(),
     new webpack.optimize.ModuleConcatenationPlugin(),
-    new ExtractTextPlugin('OneSignalSDKStyles.css'),
-    new webpack.DefinePlugin(await getBuildDefines()),
+    new MiniCssExtractPlugin({ filename: 'OneSignalSDKStyles.[contenthash].css' }),
+    new webpack.DefinePlugin(getBuildDefines()),
   ];
   if (!!process.env.ANALYZE) {
     const sizeAnalysisReportPath = path.resolve(path.join('build', 'size-analysis.html'));
@@ -71,7 +70,7 @@ async function generateWebpackConfig() {
     entry: {
       'OneSignalSDK.js': path.resolve('build/ts-to-es6/src/entries/sdk.js'),
       'OneSignalSDKWorker.js': path.resolve('build/ts-to-es6/src/entries/worker.js'),
-      'OneSignalSDKStyles.css': path.resolve('src/entries/stylesheet.scss'),
+      'OneSignalSDKStyles.css': path.resolve('src/entries/stylesheet.js'),
     },
     output: {
       path: path.resolve('build/bundles'),
@@ -80,9 +79,8 @@ async function generateWebpackConfig() {
     mode: process.env.ENV === "production" ? "production" : "development",
     optimization: {
        minimizer: [
-        new UglifyJsPlugin({
-          sourceMap: true,
-          uglifyOptions: {
+        new TerserPlugin({
+          terserOptions: {
             sourceMap: true,
             compress: {
               drop_console: false,
@@ -106,7 +104,8 @@ async function generateWebpackConfig() {
               comments: false
             }
           }
-        })
+        }),
+        ...(process.env.ENV === 'production' ? [new CssMinimizerPlugin()] : []),
       ]
     },
     module: {
@@ -116,35 +115,35 @@ async function generateWebpackConfig() {
           exclude: /node_modules/,
           use: [
             {
-              loader: 'awesome-typescript-loader',
+              loader: 'ts-loader',
               options: {
-                configFileName: "build/config/tsconfig.es5.json"
+                configFile: "build/config/tsconfig.es5.json"
               }
-            },
+            }
           ]
         },
         {
           test: /\.scss$/,
-          use: ExtractTextPlugin.extract({
-            use: [
-              {
-                loader: 'css-loader',
-                options: {
-                  sourceMap: true,
-                  minimize: true
-                }
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: true,
               },
-              {
-                loader: 'postcss-loader',
-                options: {
-                  plugins: function() {
-                    return [require('autoprefixer')];
-                  }
-                }
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                postcssOptions: {
+                  plugins: [
+                    require('autoprefixer'),
+                  ],
+                },
               },
-              'sass-loader'
-            ]
-          })
+            },
+            'sass-loader',
+          ],
         }
       ]
     },
@@ -161,41 +160,32 @@ async function generateWebpackConfig() {
   };
 }
 
-async function getStylesheetsHash() {
+function getStylesheetsHash() {
   const styleSheetsPath = 'src/stylesheets';
+  const files = glob.sync(`${styleSheetsPath}/**/*.scss`);
 
-  return await new Promise((resolve, reject) => {
-    dir.files(styleSheetsPath, async (err, files) => {
-      if (err) throw err;
-      const filteredFiles = files.filter(filePath => {
-        console.log("CSS Stylesheet:", filePath);
-        const fileName = path.basename(filePath);
-        if (fileName.endsWith('.scss')) {
-          // Only hash SCSS source files
-          return true;
-        }
-      });
-      if (filteredFiles.length === 0) {
-        reject(
-          `No .scss files were found in ${styleSheetsPath}, but SCSS files were expected. SCSS stylesheets in this directory are MD5 hashed and added as a build-time variable so loading the stylesheet from the global CDN always loads the correct version.`
-        );
-      }
-      let hashes = [];
-      for (let styleSheetPath of filteredFiles) {
-        const hash = md5file.sync(styleSheetPath);
-        hashes.push(hash);
-      }
-      // Strangely enough, the order is inconsistent so we have to sort the hashes
-      hashes = hashes.sort();
-      const joinedHashesStr = hashes.join('-');
-      const combinedHash = crypto.createHash('md5').update(joinedHashesStr).digest("hex");
-      console.log(`MD5 hash of SCSS source files in ${styleSheetsPath} is ${combinedHash}.`);
-      resolve(combinedHash);
-    });
-  });
+  if (files.length === 0) {
+    throw new Error(`No .scss files were found in ${styleSheetsPath}, but SCSS files were expected.`);
+  }
+
+  let hashes = [];
+  for (let styleSheetPath of files) {
+    const hash = md5file.sync(styleSheetPath);
+    hashes.push(hash);
+  }
+
+  // Strangely enough, the order is inconsistent so we have to sort the hashes
+  hashes = hashes.sort();
+  const joinedHashesStr = hashes.join('-');
+  const combinedHash = crypto.createHash('md5').update(joinedHashesStr).digest("hex");
+
+  console.log(`MD5 hash of SCSS source files in ${styleSheetsPath} is ${combinedHash}.`);
+
+  return combinedHash;
 }
 
-async function getBuildDefines() {
+
+function getBuildDefines() {
   var buildDefines = {
     __BUILD_TYPE__: process.env.ENV,
     __BUILD_ORIGIN__: process.env.BUILD_ORIGIN,
@@ -206,12 +196,12 @@ async function getBuildDefines() {
     __TEST__: !!process.env.TESTS,
     __VERSION__: process.env.npm_package_config_sdkVersion,
     __LOGGING__: process.env.ENV === "development",
-    __SRC_STYLESHEETS_MD5_HASH__: JSON.stringify(await getStylesheetsHash()),
+    __SRC_STYLESHEETS_MD5_HASH__: JSON.stringify(getStylesheetsHash()),
   };
   if (process.env.ENV === 'production') {
     buildDefines['process.env.NODE_ENV'] = JSON.stringify('production');
   }
   return buildDefines;
 }
 
-module.exports = generateWebpackConfig();
+module.exports = () => generateWebpackConfig();