Merge branch 'master' into ab-bump-credo-version

CHANGELOG.md

@@ -7,6 +7,7 @@
 
 ### Chore
 - [#2432](https://github.com/poanetwork/blockscout/pull/2432) - bump credo version
+- [#2435](https://github.com/poanetwork/blockscout/pull/2435) - Replace deprecated extract-text-webpack-plugin with mini-css-extract-plugin
 - [#2450](https://github.com/poanetwork/blockscout/pull/2450) - Fix clearance of logs and node_modules folders in clearing script
 - [#2434](https://github.com/poanetwork/blockscout/pull/2434) - get rid of timex warnings
 

apps/block_scout_web/assets/package.json

@@ -54,13 +54,15 @@
     "eslint-plugin-node": "^5.2.1",
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-standard": "^3.0.1",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^1.1.11",
     "jest": "^23.2.0",
+    "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.9.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^2.1.4",
     "sass-loader": "^7.0.1",
     "style-loader": "^0.21.0",
+    "terser-webpack-plugin": "^1.3.0",
     "webpack": "^4.6.0",
     "webpack-cli": "^3.0.8"
   },

apps/block_scout_web/assets/webpack.config.js

@@ -1,5 +1,7 @@
 const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const TerserJSPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { ContextReplacementPlugin } = require('webpack');
 const glob = require("glob");
@@ -32,6 +34,9 @@ const appJs =
       filename: 'app.js',
       path: path.resolve(__dirname, '../priv/static/js')
     },
+    optimization: {
+      minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
+    },
     module: {
       rules: [
         {
@@ -43,8 +48,9 @@ const appJs =
         },
         {
           test: /\.scss$/,
-          use: ExtractTextPlugin.extract({
-            use: [{
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
               loader: "css-loader"
             }, {
               loader: "postcss-loader"
@@ -57,9 +63,8 @@ const appJs =
                   'node_modules/@fortawesome/fontawesome-free/scss'
                 ]
               }
-            }],
-            fallback: 'style-loader'
-          })
+            }
+          ]
         }, {
           test: /\.(svg|ttf|eot|woff|woff2)$/,
           use: {
@@ -74,7 +79,9 @@ const appJs =
       ]
     },
     plugins: [
-      new ExtractTextPlugin('../css/app.css'),
+      new MiniCssExtractPlugin({
+        filename: '../css/app.css'
+      }),
       new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
       new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/)
     ]