updated to webpack v5

assets/package.json

@@ -3,7 +3,7 @@
   "description": " ",
   "license": "MIT",
   "scripts": {
-    "deploy": "webpack --mode production",
+    "deploy": "NODE_ENV=production webpack --mode production",
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
@@ -13,18 +13,16 @@
     "topbar": "^1.x"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.x",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-env": "^7.x",
-    "babel-loader": "^8.0.0",
+    "babel-loader": "^8.x",
-    "copy-webpack-plugin": "^5.1.1",
+    "copy-webpack-plugin": "^7.x",
-    "css-loader": "^3.4.2",
+    "css-loader": "^5.x",
-    "hard-source-webpack-plugin": "^0.13.1",
+    "css-minimizer-webpack-plugin": "^1.x",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^1.x",
-    "node-sass": "^4.13.1",
+    "sass": "^1.x",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "sass-loader": "^10.x",
-    "sass-loader": "^8.0.2",
+    "webpack": "^5.x",
-    "terser-webpack-plugin": "^2.3.2",
+    "webpack-cli": "^4.x"
-    "webpack": "4.41.5",
-    "webpack-cli": "^3.3.2"
   }
 }

assets/webpack.config.js

@@ -1,53 +1,45 @@
-const path = require('path');
+const path = require("path");
-const glob = require('glob');
+const glob = require("glob");
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
-const TerserPlugin = require('terser-webpack-plugin');
+const CopyWebpackPlugin = require("copy-webpack-plugin");
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = (env, options) => {
-  const devMode = options.mode !== 'production';
+  const devMode = options.mode !== "production";
 
   return {
-    optimization: {
-      minimizer: [
-        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
-        new OptimizeCSSAssetsPlugin({})
-      ]
-    },
     entry: {
-      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
+      app: glob.sync("./vendor/**/*.js").concat(["./js/app.js"]),
     },
     output: {
-      filename: '[name].js',
+      path: path.resolve(__dirname, "../priv/static/js"),
-      path: path.resolve(__dirname, '../priv/static/js'),
+      filename: "[name].js",
-      publicPath: '/js/'
+      publicPath: "/js/",
     },
-    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
-            loader: 'babel-loader'
+            loader: "babel-loader",
-          }
+          },
         },
         {
           test: /\.[s]?css$/,
-          use: [
+          use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
-            MiniCssExtractPlugin.loader,
+        },
-            'css-loader',
+      ],
-            'sass-loader',
-          ],
-        }
-      ]
     },
     plugins: [
-      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
+      new MiniCssExtractPlugin({ filename: "../css/app.css" }),
-      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
+      new CopyWebpackPlugin({
-    ]
+        patterns: [{ from: "static/", to: "../" }],
-    .concat(devMode ? [new HardSourceWebpackPlugin()] : [])
+      }),
-  }
+    ],
+    optimization: {
+      minimizer: ["...", new CssMinimizerPlugin()],
+    },
+    devtool: devMode ? "source-map" : undefined,
+  };
 };

config/dev.exs

@@ -25,7 +25,8 @@ config :bones73k, Bones73kWeb.Endpoint,
       "node_modules/webpack/bin/webpack.js",
       "--mode",
       "development",
-      "--watch-stdin",
+      "--watch",
+      "--watch-options-stdin",
       cd: Path.expand("../assets", __DIR__)
     ]
   ]
@@ -77,4 +78,3 @@ config :phoenix, :plug_init_mode, :runtime
 
 # Import secret config
 import_config "dev.secret.exs"
-