feat: Upgrade webpack

apps/app/assets/package.json

@@ -13,7 +13,6 @@
     "autoprefixer": "^9.8.6",
     "csswring": "^7.0.0",
     "glob": "^7.1.6",
-    "gulp": "^4.0.2",
     "phoenix": "file:/../../../deps/phoenix",
     "phoenix_html": "file:/../../../deps/phoenix_html",
     "phoenix_live_view": "file:../../../deps/phoenix_live_view",
@@ -27,14 +26,14 @@
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "babel-loader": "^8.0.0",
-    "copy-webpack-plugin": "^5.1.1",
+    "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^3.4.2",
+    "css-minimizer-webpack-plugin": "^3.0.2",
     "file-loader": "^6.0.0",
     "image-webpack-loader": "^6.0.0",
     "less": "^3.11.3",
     "less-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "mini-css-extract-plugin": "^1.6.2",
     "postcss-css-variables": "^0.17.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
@@ -44,8 +43,8 @@
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.1.0",
     "terser-webpack-plugin": "^2.3.2",
-    "webpack": "4.41.5",
-    "webpack-cli": "^3.3.2"
+    "webpack": "^5.1.0",
+    "webpack-cli": "^4.7.2"
   },
   "resolutions": {
     "graceful-fs": "4.2.3"

apps/app/assets/webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 const glob = require('glob');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const nodeModulesPath = path.resolve(__dirname, 'node_modules')
@@ -14,7 +14,7 @@ module.exports = (env, options) => {
     optimization: {
       minimizer: [
         new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
-        new OptimizeCSSAssetsPlugin({})
+        new CssMinimizerPlugin(),
       ]
     },
     mode: options.mode,
@@ -63,7 +63,7 @@ module.exports = (env, options) => {
         {
           test: /\.css$/,
           use: [
-            {loader: MiniCssExtractPlugin.loader, options: {sourceMap: true}},
+            {loader: MiniCssExtractPlugin.loader},
             {loader: 'css-loader', options: {sourceMap: true}},
             {loader: 'postcss-loader', options: {sourceMap: true}},
           ],
@@ -75,12 +75,12 @@ module.exports = (env, options) => {
         filename: 'css/[name].css',
         chunkFilename: '[id].css',
       }),
-      new CopyWebpackPlugin([
+      new CopyWebpackPlugin({patterns: [
         {
           from: path.resolve(__dirname, 'static'),
           to: path.resolve(__dirname, '../priv/static'),
         },
-      ]),
+      ]}),
     ],
     resolve: {
       alias: {

config/dev.exs

@@ -24,7 +24,8 @@ use Mix.Config
         "node_modules/webpack/bin/webpack.js",
         "--mode",
         "development",
-        "--watch-stdin",
+        "--watch",
+        "--watch-options-stdin",
         cd: Path.expand("../apps/#{otp_app}/assets", __DIR__)
       ]
     ]