From ec0bd106bbb0583ce05bcfab7bedec922aebfa82 Mon Sep 17 00:00:00 2001 From: Rodrigo Gomez Palacio Date: Wed, 10 Jul 2024 14:03:55 -0500 Subject: [PATCH] Update webpack config Motivation: update webpack.config.js w/ new plugins & bring in line with master --- build/config/webpack.config.js | 122 +++++++++++++++------------------ 1 file changed, 56 insertions(+), 66 deletions(-) diff --git a/build/config/webpack.config.js b/build/config/webpack.config.js index f4f160ea1..d272f11e6 100644 --- a/build/config/webpack.config.js +++ b/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,7 +196,7 @@ 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'); @@ -214,4 +204,4 @@ async function getBuildDefines() { return buildDefines; } -module.exports = generateWebpackConfig(); +module.exports = () => generateWebpackConfig();