Webpack 5 upgrade (#562)

Upgrade our webpack config from 4 to 5.

.tool-versions

@@ -1 +1 @@
-nodejs 12.6.0
+nodejs 14.20.0

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "clean": "rm -f .yarnclean public/static/*.css public/static/*.html public/static/*.js public/static/*.map",
-    "build": "yarn run clean && NODE_ENV=production node ./node_modules/webpack/bin/webpack.js -p --progress --config=webpack.prod.config.js --env.commitsha=`git rev-parse HEAD`",
+    "build": "yarn run clean && NODE_ENV=production node ./node_modules/webpack/bin/webpack.js --progress --config=webpack.prod.config.js --env commitsha=`git rev-parse HEAD` --stats-children --stats-error-details",
     "dev": "DEBUG=express:* NODE_ENV=development babel-node src/server/dev.js",
     "start": "yarn dev",
     "lint": "yarn lint:js && yarn lint:css",
@@ -133,9 +133,10 @@
     "isomorphic-fetch": "3.0.0",
     "jwt-decode": "3.1.2",
     "lodash": "4.17.21",
+    "mini-css-extract-plugin": "^2.6.1",
     "moment": "2.29.3",
     "mousetrap": "1.6.5",
-    "node-polyfill-webpack-plugin": "^1.1.4",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "path-browserify": "^1.0.1",
     "postcss": "8.4.14",
     "postcss-apply": "0.12.0",
@@ -170,10 +171,10 @@
     "transit-immutable-js": "0.8.0",
     "trunc-html": "1.1.2",
     "tween.js": "16.6.0",
+    "universal-cookie": "^4.0.4",
     "url-regex": "5.0.0",
     "utf-8-validate": "^5.0.9",
-    "webpack-node-externals": "^3.0.0",
-    "universal-cookie": "^4.0.4"
+    "webpack-node-externals": "^3.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",
@@ -200,7 +201,8 @@
     "eslint": "8.16.0",
     "express": "4.18.1",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "html-loader": "3.1.0",
+    "fs": "^0.0.1-security",
+    "html-loader": "4.1.0",
     "html-webpack-plugin": "5.5.0",
     "http-proxy": "1.18.1",
     "husky": "^8.0.1",
@@ -218,6 +220,8 @@
     "stylelint": "^14.8.5",
     "stylelint-config-primer": "^11.0.1",
     "stylelint-no-unsupported-browser-features": "^5.0.3",
+    "svg-url-loader": "^7.1.1",
+    "url-loader": "^4.1.1",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-middleware": "5.3.3",

public/template.html

@@ -14,7 +14,9 @@
     <meta property="og:site_name" content="Ello">
     <meta name="twitter:site" content="@elloworld">
     <meta name="facebook-domain-verification" content="utogviro1tjct4czlhxbz9k0vj7pfq" />
+    <!-- webpackIgnore: true -->
     <link href="/apple-touch-icon.png" rel="apple-touch-icon">
+    <!-- webpackIgnore: true -->
     <link href="/ello-icon.svg" rel="mask-icon" color="#000">
     <link href="https://github.com/orgs/ello/people" rel="author">
     <link href="https://ello.co/wtf/policies/terms/" rel="license">

src/routes/NotificationRoutes.js

@@ -1,12 +1,13 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Redirect } from 'react-router-dom';
 /* eslint-disable consistent-return */
 /* eslint-disable no-lone-blocks */
 /* eslint-disable react/prop-types */
 /* eslint-disable react/no-typos */
 /* eslint-disable react/react-in-jsx-scope */
 /* esLint-disable  no-lone-blocks */
 import { connect } from 'react-redux';
-import { Redirect } from 'react-router-dom';
-import PropTypes from 'prop-types'
 import { selectParamsType } from '../selectors/params'
 
 function mapStateToProps(state) {

src/server/upload_html_plugin.js

@@ -7,7 +7,7 @@ function UploadHTMLPlugin(options) {
 }
 
 UploadHTMLPlugin.prototype.apply = function apply(compiler) {
-  compiler.plugin('emit', (compilation, callback) => {
+  compiler.hooks.emit.tapAsync('emit', (compilation, callback) => {
     Object.keys(compilation.assets).forEach((filename) => {
       if (/\.html$/.test(filename)) {
         const source = compilation.assets[filename].source()
@@ -39,7 +39,7 @@ UploadHTMLPlugin.prototype.apply = function apply(compiler) {
           })
       }
     })
-    callback()
+    if (callback) callback()
   })
 }
 

src/styles/jso.js

@@ -1,5 +1,5 @@
 // JavaScript Style Objects (jso)
-import { css, media, after } from './jss'
+import { after, css, media } from './jss'
 
 // TODO: Note web vs native properties
 // TODO: Should web only props live in cso?
@@ -305,6 +305,9 @@ export const monoRegular = {
   fontStyle: 'normal',
   fontWeight: 400,
 }
+export const italic = {
+  fontStyle: 'italic',
+}
 
 // TODO: Turn into base level text components (web)
 export const sansRegularCSS = css(sansRegular)
@@ -410,6 +413,7 @@ export const hitarea = {
   content: '""',
   backgroundColor: 'rgba(0, 0, 0, 0)',
 }
+export const pointerEvents = { pointerEvents: 'all' }
 
 // usually apply to :after of a container element
 export const clearFix = css(
@@ -431,3 +435,9 @@ export const resetInput = css(
     outline: 'none',
   },
 )
+
+export const buttonHighlightStyle = {}
+export const alignLeft = {}
+export const alignCenter = {}
+export const transitionHeight = {}
+

webpack.prod.config.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const S3Plugin = require('webpack-s3-plugin')
 const autoprefixer = require('autoprefixer')
@@ -17,12 +17,22 @@ const postcssUrl = require('postcss-url')
 const webpack = require('webpack')
 const pkg = require('./package.json')
 const UploadHTMLPlugin = require('./src/server/upload_html_plugin')
+const dotenv = require('dotenv')
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 
 // load env vars first
-require('dotenv').config()
+dotenv.config()
 
 module.exports = env => ({
   mode: 'production',
+  resolve: {
+    fallback: {
+      "fs": false,
+      "child_process": false,
+      "tls": false,
+      "net": false,
+    },
+  },
   devtool: 'source-map',
   entry: {
     main: './src/main',
@@ -35,11 +45,11 @@ module.exports = env => ({
   },
   optimization: {
     minimize: true,
+    emitOnErrors: true
   },
   plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.DefinePlugin({ 'process.env': { NODE_ENV: "'production'" } }),
-    new ExtractTextPlugin({ filename: `${env.commitsha}.css` }),
+    new NodePolyfillPlugin(),
+    new MiniCssExtractPlugin({ filename: `${env.commitsha}.css` }),
     new HtmlWebpackPlugin({
       filename: `${env.commitsha}.html`,
       chunks: ['main'],
@@ -48,12 +58,6 @@ module.exports = env => ({
       inject: 'body',
     }),
     new webpack.optimize.ModuleConcatenationPlugin(),
-    // new webpack.optimize.minimize({
-    //   compress: {
-    //     screw_ie8: true,
-    //   },
-    //   sourceMap: true,
-    // }),
     new S3Plugin({
       s3Options: {
         accessKeyId: process.env.AWS_ACCESS_KEY_ID,
@@ -70,7 +74,7 @@ module.exports = env => ({
       password: process.env.APEX_SERVE_PASSWORD,
     }),
     function webpackStats() {
-      this.plugin('done', (stats) => {
+      this.hooks.done.tap('done', (stats) => {
         fs.writeFileSync(
           path.join(__dirname, 'webpack-stats/prod.json'),
           JSON.stringify(stats.toJson()))
@@ -89,34 +93,46 @@ module.exports = env => ({
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            'css-loader',
-            {
-              loader: 'postcss-loader',
-              options: {
-                plugins: loader => [
-                  postcssImport({ result: { messages: { dependency: loader } } }),
-                  postcssUrl(),
-                  postcssCustomProperties(),
-                  postcssApply(),
-                  postcssCalc(),
-                  postcssColorFunction(),
-                  postcssCustomMedia(),
-                  postcssPxToRem({ propWhiteList: [], minPixelValue: 5 }),
-                  autoprefixer({ browsers: pkg.browserlist }),
-                  postcssReporter(),
-                ],
-              },
-            },
-          ],
-        }),
+        use: [MiniCssExtractPlugin.loader, 'css-loader', {
+          loader: 'postcss-loader',
+          options: {
+            postcssOptions:{
+              plugins: loader => [
+                postcssImport({ result: { messages: { dependency: loader } } }),
+                postcssUrl(),
+                postcssCustomProperties(),
+                postcssApply(),
+                postcssCalc(),
+                postcssColorFunction(),
+                postcssCustomMedia(),
+                postcssPxToRem({ propWhiteList: [], minPixelValue: 5 }),
+                autoprefixer({ browsers: pkg.browserlist }),
+                postcssReporter(),
+              ]
+            }
+          }}]
       },
       {
         test: /\.html$/,
         loader: 'html-loader',
       },
+      {
+       test: /\.(png|jpg|gif)$/,
+        use: {
+          loader: 'url-loader',
+        }
+      },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'svg-url-loader',
+            options: {
+              limit: 10000,
+            },
+          },
+        ],
+      }
     ],
   },
 })