Upgrade webpack (OriginProtocol#655)

* chore(deps): update all * Webpack upgrade * Update all * Upgrade webpack * Upgrade webpack * Lint Co-authored-by: Renovate Bot <[email protected]>
errazudin · Oct 20, 2020 · 4338130 · 4338130
1 parent db31f6c
commit 4338130
Show file tree

Hide file tree

Showing 6 changed files with 1,778 additions and 2,654 deletions.
diff --git a/shop/buildThemes.sh b/shop/buildThemes.sh
@@ -9,10 +9,10 @@ buildTheme () {
 
   echo "Building $themeName..."
 
-  export NODE_ENV=production 
+  export NODE_ENV=production
   export THEME=$themeName
 
-  ./node_modules/.bin/webpack --loglevel notice --output-path="../backend/themes/$themeName"
+  ./node_modules/.bin/webpack --output-path="../backend/themes/$themeName"
   cp "$1/screenshot.png" "../backend/themes/$themeName/screenshot.png"
   cp "$1/theme.json" "../backend/themes/$themeName/theme.json"
 

diff --git a/shop/index.js b/shop/index.js
@@ -50,25 +50,21 @@ async function start() {
     skipContractsIfExists: process.env.CLEAN ? false : true
   })
 
-  const devServerArgs = ['--host=0.0.0.0']
+  const devServerArgs = ['serve', '--host=0.0.0.0']
   if (process.env.NODE_ENV === 'production') {
     devServerArgs.push('--info=false')
   }
   if (process.env.NOOPENER !== 'true') {
-    devServerArgs.push('--open')
+    devServerArgs.push('--open=true')
   }
   if (process.env.WATCH === 'true') {
     devServerArgs.push('--watch')
   }
 
-  const webpackDevServer = spawn(
-    './node_modules/.bin/webpack-dev-server',
-    devServerArgs,
-    {
-      stdio: 'inherit',
-      env: process.env
-    }
-  )
+  const webpackDevServer = spawn('./node_modules/.bin/webpack', devServerArgs, {
+    stdio: 'inherit',
+    env: process.env
+  })
 
   let backend
   if (process.env.BACKEND !== 'false') {

diff --git a/shop/package.json b/shop/package.json
@@ -5,20 +5,20 @@
   "main": "index.js",
   "scripts": {
     "start": "node -r @babel/register index",
-    "build:js": "NODE_ENV=production webpack --loglevel notice",
+    "build:js": "NODE_ENV=production webpack",
     "build:css": "node scripts/getCss > public/app.css",
     "build:dist": "rm -rf ../backend/dist && npm run build && cp -r public ../backend/dist",
     "build": "npm run theme && npm run build:css && npm run build:js && npm run translate",
     "theme": "sh buildThemes.sh",
-    "theme:art": "NODE_ENV=production THEME=art webpack --loglevel notice",
+    "theme:art": "NODE_ENV=production THEME=art webpack",
     "theme:art:dist": "sh buildThemes.sh art",
-    "theme:cake": "NODE_ENV=production THEME=cake webpack --loglevel notice",
+    "theme:cake": "NODE_ENV=production THEME=cake webpack",
     "theme:cake:dist": "sh buildThemes.sh cake",
-    "theme:poly": "NODE_ENV=production THEME=poly webpack --loglevel notice",
+    "theme:poly": "NODE_ENV=production THEME=poly webpack",
     "theme:poly:dist": "sh buildThemes.sh poly",
-    "theme:ybm": "NODE_ENV=production THEME=ybm webpack --loglevel notice",
+    "theme:ybm": "NODE_ENV=production THEME=ybm webpack",
     "theme:ybm:dist": "sh buildThemes.sh ybm",
-    "theme:uni": "NODE_ENV=production THEME=uni webpack --loglevel notice",
+    "theme:uni": "NODE_ENV=production THEME=uni webpack",
     "theme:uni:dist": "sh buildThemes.sh uni",
     "theme:watch": "sh buildThemeDev.sh",
     "lint": "eslint . && npm run prettier:check",
@@ -53,15 +53,19 @@
     "blueimp-load-image": "^5.14.0",
     "chartist": "^0.11.4",
     "ckeditor4-react": "^1.2.0",
+    "crypto-browserify": "^3.12.0",
     "dayjs": "^1.8.36",
     "dotenv": "^8.2.0",
     "ethers": "5.0.18",
     "fbt": "^0.15.0",
     "flexsearch": "^0.6.32",
+    "https-browserify": "^1.0.0",
     "openpgp": "^4.10.8",
+    "path-browserify": "^1.0.1",
     "postcss": "^8.0.9",
     "postcss-loader": "^4.0.2",
     "prettier": "^2.1.2",
+    "process": "^0.11.10",
     "query-string": "^6.13.2",
     "randomstring": "^1.1.5",
     "react": "^16.13.1",
@@ -72,6 +76,8 @@
     "react-stripe-elements": "^6.1.2",
     "react-styl": "^0.0.3",
     "serve-static": "^1.14.1",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.1.1",
     "tailwindcss": "^1.8.10",
     "typeface-lato": "^1.0.0",
     "typeface-roboto": "^1.0.0",
@@ -125,7 +131,7 @@
     "babel-plugin-fbt-runtime": "0.9.12",
     "bootstrap": "4.5.3",
     "clean-webpack-plugin": "3.0.0",
-    "css-loader": "4.3.0",
+    "css-loader": "5.0.0",
     "eslint": "7.11.0",
     "eslint-plugin-babel": "5.3.1",
     "eslint-plugin-react": "7.21.5",
@@ -134,17 +140,17 @@
     "ignore-loader": "0.1.2",
     "inquirer": "7.3.3",
     "ipfs-deploy": "8.0.1",
-    "mini-css-extract-plugin": "0.12.0",
+    "mini-css-extract-plugin": "1.1.1",
     "mocha": "8.2.0",
     "node-sass": "4.14.1",
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "react-router-dom": "5.2.0",
     "sass-loader": "10.0.3",
-    "style-loader": "1.3.0",
-    "terser-webpack-plugin": "4.2.3",
+    "style-loader": "2.0.0",
+    "terser-webpack-plugin": "5.0.0",
     "url-loader": "4.1.1",
-    "webpack": "4.44.2",
-    "webpack-cli": "3.3.12",
+    "webpack": "5.1.3",
+    "webpack-cli": "4.1.0",
     "webpack-dev-server": "3.11.0"
   },
   "eslintIgnore": [

diff --git a/shop/src/themes/cake/tailwind.config.js b/shop/src/themes/cake/tailwind.config.js
@@ -44,6 +44,11 @@ const getPaletteConfig = () => {
 const paletteConfig = getPaletteConfig()
 
 module.exports = {
+  purge: { content: ['./**/*.js', './app.css'] },
+  future: {
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true
+  },
   theme: {
     container: {
       center: true,

diff --git a/shop/webpack.config.js b/shop/webpack.config.js
@@ -50,7 +50,7 @@ const webpackConfig = {
   devtool,
   output: {
     filename: '[name].js',
-    chunkFilename: `dist/[name].[hash:8].bundle.js`,
+    chunkFilename: `dist/[name].[contenthash:8].bundle.js`,
     path: path.resolve(__dirname, 'public'),
     publicPath: absolute ? '/' : '',
     crossOriginLoading: 'anonymous'
@@ -63,7 +63,7 @@ const webpackConfig = {
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
-        query: {
+        options: {
           plugins: [
             [
               'babel-plugin-fbt',
@@ -147,10 +147,15 @@ const webpackConfig = {
   resolve: {
     extensions: ['.js', '.json'],
     modules: [path.resolve(__dirname, 'src/constants'), './node_modules'],
-    symlinks: false
-  },
-  node: {
-    fs: 'empty'
+    symlinks: false,
+    fallback: {
+      fs: false,
+      path: require.resolve('path-browserify'),
+      crypto: require.resolve('crypto-browserify'),
+      stream: require.resolve('stream-browserify'),
+      http: require.resolve('stream-http'),
+      https: require.resolve('https-browserify')
+    }
   },
   devServer: {
     port: process.env.PORT || 9000,
@@ -162,13 +167,16 @@ const webpackConfig = {
     // Below is so proxy does not take precedence.
     // See https://github.com/webpack/webpack-dev-server/issues/1132#issuecomment-340639565
     features: [
-      'before',
       'setup',
+      'before',
       'headers',
       'middleware',
       'contentBaseFiles',
       'proxy',
+      'historyApiFallback',
       'middleware',
+      'contentBaseFiles',
+      'contentBaseIndex',
       'magicHtml'
     ],
     proxy: {
@@ -182,6 +190,9 @@ const webpackConfig = {
   },
   mode: isProduction ? 'production' : 'development',
   plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser'
+    }),
     new SriPlugin({
       hashFuncNames: ['sha256', 'sha384'],
       enabled: isProduction
@@ -217,7 +228,7 @@ const webpackConfig = {
       CONTENT_HASH: process.env.CONTENT_HASH || '',
       ABSOLUTE: process.env.ABSOLUTE || ''
     }),
-    new MiniCssExtractPlugin({ filename: '[name].[hash:8].css' })
+    new MiniCssExtractPlugin({ filename: '[name].[contenthash:8].css' })
   ],
 
   optimization: {
@@ -228,7 +239,7 @@ const webpackConfig = {
 }
 
 if (isProduction) {
-  webpackConfig.output.filename = '[name].[hash:8].js'
+  webpackConfig.output.filename = '[name].[contenthash:8].js'
   webpackConfig.optimization.minimizer = [
     new TerserPlugin({ extractComments: false }),
     new OptimizeCSSAssetsPlugin({})