updating to webpack 5 + dev dependencies WIP #556

impactoss · Jun 11, 2024 · 18ff66d · 18ff66d
1 parent 05a0037
commit 18ff66d
Show file tree

Hide file tree

Showing 6 changed files with 2,991 additions and 2,424 deletions.
diff --git a/internals/webpack/webpack.base.babel.js b/internals/webpack/webpack.base.babel.js
@@ -4,6 +4,7 @@
 
 const path = require('path');
 const webpack = require('webpack');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 
 module.exports = (options) => ({
   mode: options.mode,
@@ -107,25 +108,28 @@ module.exports = (options) => ({
       },
     ],
   },
-  plugins: options.plugins.concat([
-    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
-    // inside your code for any environment checks; Terser will automatically
-    // drop any unreachable code.
+  plugins: [
+    ...options.plugins,
     new webpack.EnvironmentPlugin({
-      NODE_ENV: 'development',
-      SERVER: 'development',
+      NODE_ENV: options.mode,
+      SERVER: options.mode,
     }),
-  ]),
+    new NodePolyfillPlugin(),
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+  ],
   resolve: {
     modules: ['node_modules', 'app'],
     extensions: ['.js', '.jsx', '.react.js'],
     mainFields: ['browser', 'jsnext:main', 'main'],
+    fallback: {
+      fs: false,
+      child_process: false,
+      process: require.resolve('process/browser'),
+    },
   },
   devtool: options.devtool,
   target: 'web', // Make web variables accessible to webpack, e.g. window
   performance: options.performance || {},
-  node: {
-    fs: 'empty',
-    child_process: 'empty',
-  },
 });
diff --git a/internals/webpack/webpack.dev.babel.js b/internals/webpack/webpack.dev.babel.js
@@ -19,7 +19,6 @@ module.exports = require('./webpack.base.babel')({
 
   // Don't use hashes in dev mode for better performance
   output: {
-    filename: '[name].js',
     chunkFilename: '[name].chunk.js',
   },
 

diff --git a/internals/webpack/webpack.prod.babel.js b/internals/webpack/webpack.prod.babel.js
@@ -3,11 +3,12 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WebpackPwaManifest = require('webpack-pwa-manifest');
 const OfflinePlugin = require('offline-plugin');
-const { HashedModuleIdsPlugin } = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
-const WebpackGitHash = require('webpack-git-hash');
 const CopyPlugin = require('copy-webpack-plugin');
+const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
+var webpack = require('webpack');
+var gitRevisionPlugin = new GitRevisionPlugin()
 
 module.exports = require('./webpack.base.babel')({
   mode: 'production',
@@ -20,8 +21,8 @@ module.exports = require('./webpack.base.babel')({
 
   // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
   output: {
-    filename: '[name].[chunkhash].[githash].js',
-    chunkFilename: '[name].[chunkhash].[githash].chunk.js',
+    filename: '[name].[git-revision-hash].js',
+    chunkFilename: '[name].[git-revision-hash].chunk.js',
   },
 
   optimization: {
@@ -65,10 +66,14 @@ module.exports = require('./webpack.base.babel')({
         },
       },
     },
+    moduleIds: 'deterministic',
   },
 
   plugins: [
-    new WebpackGitHash(),
+    new webpack.DefinePlugin({
+      'VERSION': JSON.stringify(gitRevisionPlugin.version()),
+      'COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()),
+    }),
 
     // Minify and optimize the index.html
     new HtmlWebpackPlugin({
@@ -88,6 +93,24 @@ module.exports = require('./webpack.base.babel')({
       inject: true,
     }),
 
+    new CompressionPlugin({
+      algorithm: 'gzip',
+      test: /\.js$|\.css$|\.html$/,
+      threshold: 10240,
+      minRatio: 0.8,
+    }),
+
+    new WebpackPwaManifest({
+      name: 'IMPACT OSS - NZ',
+      short_name: 'IMPACT OSS - NZ',
+      description: 'IMPACT OSS - NZ',
+      background_color: '#ffffff',
+      theme_color: '#ffffff',
+      inject: true,
+      ios: true,
+    }),
+    new CopyPlugin({ patterns: [{ from: 'app/robots.txt', to: 'robots.txt' }] }),
+
     // Put it in the end to capture all the HtmlWebpackPlugin's
     // assets manipulations and do leak its manipulations to HtmlWebpackPlugin
     new OfflinePlugin({
@@ -109,54 +132,16 @@ module.exports = require('./webpack.base.babel')({
       },
 
       // Removes warning for about `additional` section usage
-      safeToUseOptionalCaches: true,
+      //safeToUseOptionalCaches: true,
       // changing config according to https://github.com/react-boilerplate/react-boilerplate/issues/2750#issuecomment-536215256
       ServiceWorker: {
         events: true,
       },
       responseStrategy: 'network-first',
     }),
-
-    new CompressionPlugin({
-      algorithm: 'gzip',
-      test: /\.js$|\.css$|\.html$/,
-      threshold: 10240,
-      minRatio: 0.8,
-    }),
-
-    new WebpackPwaManifest({
-      name: 'IMPACT OSS - NZ',
-      short_name: 'IMPACT OSS - NZ',
-      description: 'IMPACT OSS - NZ',
-      background_color: '#ffffff',
-      theme_color: '#ffffff',
-      inject: true,
-      ios: true,
-      // icons: [
-      //   {
-      //     src: path.resolve('app/images/icon-512x512.png'),
-      //     sizes: [72, 96, 128, 144, 192, 384, 512],
-      //   },
-      //   {
-      //     src: path.resolve('app/images/icon-512x512.png'),
-      //     sizes: [120, 152, 167, 180],
-      //     ios: true,
-      //   },
-      // ],
-    }),
-
-    new HashedModuleIdsPlugin({
-      hashFunction: 'sha256',
-      hashDigest: 'hex',
-      hashDigestLength: 20,
-    }),
-
-    new CopyPlugin([
-      { from: 'app/robots.txt', to: 'robots.txt' },
-    ]),
   ],
-
   performance: {
     assetFilter: (assetFilename) => !/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename),
   },
+  stats: 'verbose',
 });