Bump webpack to 5.0

assets/js/hooks.js

@@ -91,9 +91,12 @@ import {
   CircleMarker,
 } from "leaflet";
 
+import markerIcon from "leaflet/dist/images/marker-icon.png";
+import markerShadow from "leaflet/dist/images/marker-shadow.png";
+
 const icon = new Icon({
-  iconUrl: require("leaflet/dist/images/marker-icon.png"),
-  shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
+  iconUrl: markerIcon,
+  shadowUrl: markerShadow,
   iconAnchor: [12, 40],
   popupAnchor: [0, -25],
 });

assets/package.json

@@ -2,8 +2,8 @@
   "repository": {},
   "license": "MIT",
   "scripts": {
-    "deploy": "webpack --mode production",
-    "watch": "webpack --mode development --watch"
+    "deploy": "webpack --mode production --stats-colors",
+    "watch": " webpack --mode development --watch --watch-options-stdin --stats-colors"
   },
   "dependencies": {
     "@creativebulma/bulma-tooltip": "^1.2.0",
@@ -22,16 +22,16 @@
     "@babel/preset-env": "^7.11.5",
     "babel-loader": "^8.1.0",
     "bulma": "^0.9.1",
-    "copy-webpack-plugin": "^6.2.0",
+    "copy-webpack-plugin": "^6.2.1",
     "css-loader": "^4.3.0",
-    "file-loader": "^6.1.0",
-    "mini-css-extract-plugin": "^0.11.3",
+    "file-loader": "^6.1.1",
+    "mini-css-extract-plugin": "^1.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "sass": "^1.26.11",
-    "sass-loader": "^10.0.2",
-    "terser-webpack-plugin": "^4.2.2",
-    "url-loader": "^4.1.0",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12"
+    "sass": "^1.27.0",
+    "sass-loader": "^10.0.3",
+    "terser-webpack-plugin": "^4.2.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.0.0"
   }
 }

assets/webpack.config.js

@@ -17,7 +17,6 @@ module.exports = (env, options) => ({
     app: glob.sync("./vendor/**/*.js").concat(["./js/app.js"]),
   },
   output: {
-    filename: "[name].js",
     publicPath: "/js/",
     path: path.resolve(__dirname, "../priv/static/js"),
   },
@@ -48,8 +47,7 @@ module.exports = (env, options) => ({
         loader: "url-loader",
         options: {
           limit: 10000,
-          name: "../images/[name].[hash:7].[ext]",
-          esModule: false,
+          name: "../images/[name].[contenthash:7].[ext]",
         },
       },
 
@@ -58,8 +56,7 @@ module.exports = (env, options) => ({
         loader: "url-loader",
         options: {
           limit: 10000,
-          name: "../fonts/[name].[hash:7].[ext]",
-          esModule: false,
+          name: "../fonts/[name].[contenthash:7].[ext]",
         },
       },
     ],

config/dev.exs

@@ -9,7 +9,9 @@ config :teslamate, TeslaMateWeb.Endpoint,
       "node_modules/webpack/bin/webpack.js",
       "--mode",
       "development",
-      "--watch-stdin",
+      "--stats-colors",
+      "--watch",
+      "--watch-options-stdin",
       cd: Path.expand("../assets", __DIR__)
     ]
   ],