Upgrade front end dependencies

Mostly in order to get rid of deprecated deps, and upgrade vulnerable ones.

  - Upgrade webpack from 3.x to 4.x
  - Moved babel package to main repo
  - Replaced deprecated extract-text-webpack-plugin with extract-text-webpack-plugin
  - Replaced deprecated babel-minify-webpack-plugin with terser-webpack-plugin
  - Replaced deprecated node-sass with (dart) sass package
  - Replaced deprecated sass-lint with stylelint (the rules might be a bit different

Related to #1531: trivy doesn't raise any more issue

1 files changed, 36 insertions, 32 deletions

diff --git a/webpack.config.js b/webpack.config.js
index 602147e5..a73758cc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,26 +2,21 @@ const path = require('path');
 const glob = require('glob');
 
 // Minify JS
-const MinifyPlugin = require('babel-minify-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 // This plugin extracts the CSS into its own file instead of tying it with the JS.
 // It prevents:
 //   - not having styles due to a JS error
 //   - the flash page without styles during JS loading
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-const extractCssDefault = new ExtractTextPlugin({
+const extractCss = new MiniCssExtractPlugin({
   filename: "../css/[name].min.css",
-  publicPath: 'tpl/default/css/',
-});
-
-const extractCssVintage = new ExtractTextPlugin({
-  filename: "../css/[name].min.css",
-  publicPath: 'tpl/vintage/css/',
 });
 
 module.exports = [
   {
+    mode: 'production',
     entry: {
       thumbnails: './assets/common/js/thumbnails.js',
       thumbnails_update: './assets/common/js/thumbnails-update.js',
@@ -45,23 +40,23 @@ module.exports = [
             loader: 'babel-loader',
             options: {
               presets: [
-                'babel-preset-env',
+                '@babel/preset-env',
               ]
             }
           }
         },
         {
           test: /\.s?css/,
-          use: extractCssDefault.extract({
-            use: [{
-              loader: "css-loader",
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
               options: {
-                minimize: true,
-              }
-            }, {
-              loader: "sass-loader"
-            }],
-          })
+                publicPath: 'tpl/default/css/',
+              },
+            },
+            'css-loader',
+            'sass-loader',
+          ],
         },
         {
           test: /\.(gif|png|jpe?g|svg|ico)$/i,
@@ -81,17 +76,21 @@ module.exports = [
           options: {
             name: '../fonts/[name].[ext]',
             // do not add a publicPath here because it's already handled by CSS's publicPath
-            publicPath: '',
+            publicPath: '../default/',
           }
         },
       ],
     },
+    optimization: {
+      minimize: true,
+      minimizer: [new TerserPlugin()],
+    },
     plugins: [
-      new MinifyPlugin(),
-      extractCssDefault,
+      extractCss,
     ],
   },
   {
+    mode: 'production',
     entry: {
       shaarli: [
         './assets/vintage/js/base.js',
@@ -115,21 +114,23 @@ module.exports = [
             loader: 'babel-loader',
             options: {
               presets: [
-                'babel-preset-env',
+                '@babel/preset-env',
               ]
             }
           }
         },
         {
           test: /\.css$/,
-          use: extractCssVintage.extract({
-            use: [{
-              loader: "css-loader",
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
               options: {
-                minimize: true,
-              }
-            }],
-          })
+                publicPath: 'tpl/vintage/css/',
+              },
+            },
+            'css-loader',
+            'sass-loader',
+          ],
         },
         {
           test: /\.(gif|png|jpe?g|svg|ico)$/i,
@@ -145,9 +146,12 @@ module.exports = [
         },
       ],
     },
+    optimization: {
+      minimize: true,
+      minimizer: [new TerserPlugin()],
+    },
     plugins: [
-      new MinifyPlugin(),
-      extractCssVintage,
+      extractCss,
     ],
   },
 ];