Migrate to webpack v5

yordan-kanchelov · yordan-kanchelov · commit 8f6da8d1b04d · 2021-02-04T23:41:23.000+02:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,4 @@
 {
     "editor.formatOnSave": true,
-    "editor.codeActionsOnSave": {
-        "source.fixAll": true
-    },
     "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
     "name": "pixi-typescript-boilerplate",
-    "version": "3.0.0",
+    "version": "4.0.0-beta.0",
     "description": "pixi.js typescript boilerplate webpack",
     "browserslist": "> 0.25%, not dead",
     "scripts": {
         "webpack": "webpack",
-        "webpack-dev-server": "webpack-dev-server --hot --open",
-        "build": "npx del-cli dist --force  && npm run webpack -- --env.mode production",
-        "dev": "npm run webpack-dev-server -- --env.mode development --watch",
+        "webpack-dev-server": "webpack-dev-server ",
+        "build": "npx del-cli dist --force  && npm run webpack -- --env mode=production",
+        "dev": "npm run webpack-dev-server -- --env mode=development",
         "test": "npx jest",
         "code-coverage": "jest --coverage",
         "prettier": "npx prettier",
@@ -19,58 +19,57 @@
     "author": "jkanchelov",
     "license": "MIT",
     "dependencies": {
-        "core-js": "^3.6.5",
+        "core-js": "^3.8.3",
         "pixi.js": "^5.3.7"
     },
     "devDependencies": {
-        "@babel/core": "^7.11.6",
-        "@babel/plugin-proposal-class-properties": "^7.10.4",
-        "@babel/plugin-proposal-decorators": "^7.10.5",
-        "@babel/plugin-transform-modules-commonjs": "^7.10.4",
-        "@babel/plugin-transform-runtime": "^7.11.5",
-        "@babel/preset-env": "^7.11.5",
-        "@babel/preset-typescript": "^7.10.4",
-        "@babel/runtime": "^7.11.2",
-        "@types/copy-webpack-plugin": "^6.0.0",
-        "@types/html-webpack-plugin": "^3.2.3",
-        "@types/jest": "^26.0.14",
-        "@types/mini-css-extract-plugin": "^0.9.1",
-        "@types/node": "^14.11.8",
-        "@types/optimize-css-assets-webpack-plugin": "^5.0.1",
-        "@types/terser-webpack-plugin": "^4.2.0",
-        "@types/webpack": "^4.41.22",
-        "@types/webpack-dev-server": "^3.11.0",
+        "@babel/core": "^7.12.13",
+        "@babel/plugin-proposal-class-properties": "^7.12.13",
+        "@babel/plugin-proposal-decorators": "^7.12.13",
+        "@babel/plugin-transform-modules-commonjs": "^7.12.13",
+        "@babel/plugin-transform-runtime": "^7.12.13",
+        "@babel/preset-env": "^7.12.13",
+        "@babel/preset-typescript": "^7.12.13",
+        "@babel/runtime": "^7.12.13",
+        "@types/copy-webpack-plugin": "^6.4.0",
+        "@types/html-webpack-plugin": "^3.2.4",
+        "@types/jest": "^26.0.20",
+        "@types/mini-css-extract-plugin": "^1.2.2",
+        "@types/node": "^14.14.25",
+        "@types/optimize-css-assets-webpack-plugin": "^5.0.2",
+        "@types/terser-webpack-plugin": "^5.0.2",
+        "@types/webpack": "^4.41.26",
         "@types/webpack-merge": "^4.1.5",
-        "@typescript-eslint/eslint-plugin": "^4.4.0",
-        "@typescript-eslint/parser": "^4.4.0",
-        "babel-loader": "^8.1.0",
+        "@typescript-eslint/eslint-plugin": "^4.14.2",
+        "@typescript-eslint/parser": "^4.14.2",
+        "babel-loader": "^8.2.2",
         "babel-register": "^6.26.0",
-        "copy-webpack-plugin": "^6.2.1",
-        "css-loader": "^4.3.0",
+        "copy-webpack-plugin": "^7.0.0",
+        "css-loader": "^5.0.1",
         "del-cli": "^3.0.1",
-        "eslint": "^7.11.0",
-        "eslint-config-prettier": "^6.12.0",
+        "eslint": "^7.19.0",
+        "eslint-config-prettier": "^7.2.0",
         "eslint-loader": "^4.0.2",
-        "eslint-plugin-prettier": "^3.1.4",
-        "html-webpack-plugin": "^4.5.0",
-        "husky": "^4.3.0",
+        "eslint-plugin-prettier": "^3.3.1",
+        "html-webpack-plugin": "^5.0.0",
+        "husky": "^4.3.8",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^26.5.3",
+        "jest": "^26.6.3",
         "jest-canvas-mock": "^2.3.0",
         "jsdom": "^16.4.0",
-        "mini-css-extract-plugin": "^1.0.0",
+        "mini-css-extract-plugin": "^1.3.5",
         "optimize-css-assets-webpack-plugin": "^5.0.4",
         "prettier": "^2.2.1",
         "pretty-quick": "^3.1.0",
-        "terser-webpack-plugin": "^4.2.3",
-        "ts-jest": "^26.4.1",
-        "ts-loader": "^8.0.4",
-        "ts-node": "^9.0.0",
-        "typescript": "^4.0.3",
-        "webpack": "^4.44.2",
-        "webpack-cli": "^3.3.12",
-        "webpack-dev-server": "^3.11.0",
-        "webpack-merge": "^5.2.0"
+        "terser-webpack-plugin": "^5.1.1",
+        "ts-jest": "^26.5.0",
+        "ts-loader": "^8.0.14",
+        "ts-node": "^9.1.1",
+        "typescript": "^4.1.3",
+        "webpack": "^5.20.2",
+        "webpack-cli": "^4.5.0",
+        "webpack-dev-server": "^4.0.0-beta.0",
+        "webpack-merge": "^5.7.3"
     },
     "jest": {
         "transform": {
diff --git a/src/index.ts b/src/index.ts
@@ -1,10 +1,13 @@
 import * as PIXI from "pixi.js";
-
 import "./style.css";
 
+declare const VERSION: string;
+
 const gameWidth = 800;
 const gameHeight = 600;
 
+console.log(`Welcome from pixi-typescript-boilerplate ${VERSION}`);
+
 const app = new PIXI.Application({
     backgroundColor: 0xd3d3d3,
     width: gameWidth,
diff --git a/webpack.config.ts b/webpack.config.ts
@@ -27,9 +27,6 @@ module.exports = (env: { mode: "development" | "production" }) => {
                     use: [
                         {
                             loader: MiniCssExtractPlugin.loader,
-                            options: {
-                                hmr: developmentMode,
-                            },
                         },
                         "css-loader",
                     ],
@@ -65,5 +62,7 @@ module.exports = (env: { mode: "development" | "production" }) => {
 
     const mergedConfig = merge(config, envConfig);
 
+    console.log(mergedConfig);
+
     return mergedConfig;
 };
diff --git a/webpack.development.ts b/webpack.development.ts
@@ -1,19 +1,21 @@
 import * as webpack from "webpack";
 import * as path from "path";
 
+import fs from "fs";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const pkg: any = JSON.parse(fs.readFileSync(path.join(__dirname, "package.json"), "utf-8"));
+
 module.exports = (env: { mode: "development" | "production" }) => {
-    /** @type {import('webpack').Configuration} */
     const devConfig = {
         mode: env.mode,
 
-        devtool: "cheap-module-eval-source-map",
+        devtool: "inline-source-map",
 
         devServer: {
             host: "0.0.0.0",
             openPage: "http://localhost:8080/",
-            clientLogLevel: "silent",
         },
 
         module: {
@@ -34,8 +36,8 @@ module.exports = (env: { mode: "development" | "production" }) => {
 
         output: {
             path: path.resolve(__dirname, "dist"),
-            filename: "game.js",
-            chunkFilename: "game-library.js",
+            filename: "[name].js",
+            chunkFilename: "[id].js",
         },
 
         plugins: [
@@ -44,8 +46,7 @@ module.exports = (env: { mode: "development" | "production" }) => {
             }),
 
             new webpack.DefinePlugin({
-                PRODUCTION: JSON.stringify(false),
-                VERSION: JSON.stringify("3.0.0"), // TODO Update from package.json
+                VERSION: JSON.stringify(pkg.version + "r"), // TODO Update from package.json
             }),
         ],
     };
diff --git a/webpack.production.ts b/webpack.production.ts
@@ -1,9 +1,12 @@
 import * as path from "path";
 import * as webpack from "webpack";
 
+import fs from "fs";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import OptimizeCssAssetsPlugin from "optimize-css-assets-webpack-plugin";
-import TerserPlugin from "terser-webpack-plugin";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const pkg: any = JSON.parse(fs.readFileSync(path.join(__dirname, "package.json"), "utf-8"));
 
 module.exports = (env: { mode: "development" | "production" }) => {
     return {
@@ -42,13 +45,13 @@ module.exports = (env: { mode: "development" | "production" }) => {
 
         output: {
             path: path.resolve(__dirname, "dist"),
-            filename: "game.[hash].js",
-            chunkFilename: "game-library.[contenthash].js",
+            filename: "game.[contenthash].js",
+            chunkFilename: "game-libraries.[contenthash].js",
         },
 
         plugins: [
             new MiniCssExtractPlugin({
-                filename: "[name].[hash].css",
+                filename: "[name].[contenthash].css",
             }),
 
             new OptimizeCssAssetsPlugin({
@@ -61,25 +64,10 @@ module.exports = (env: { mode: "development" | "production" }) => {
             }),
 
             new webpack.DefinePlugin({
-                PRODUCTION: JSON.stringify(true),
-                VERSION: JSON.stringify("3.0.0"), // TODO Update from package.json
+                VERSION: JSON.stringify(pkg.version + "r"), // TODO Update from package.json
             }),
 
             new webpack.ProgressPlugin(),
         ],
-
-        optimization: {
-            minimize: true,
-            minimizer: [
-                new TerserPlugin({
-                    terserOptions: {
-                        mangle: true,
-                        toplevel: true,
-                        keep_classnames: false,
-                        keep_fnames: true,
-                    },
-                }),
-            ],
-        },
     };
 };

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,4 @@`
`1`	`1`	`{`
`2`	`2`	`"editor.formatOnSave": true,`
`3`		`- "editor.codeActionsOnSave": {`
`4`		`- "source.fixAll": true`
`5`		`- },`
`6`	`3`	`"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]`
`7`	`4`	`}`