Migrate to webpack 5

.eslintignore

@@ -1,3 +1,4 @@
 **/node_modules
+typings/
 dist/
-!.*.js
+!.*.js

.eslintrc.js

@@ -7,9 +7,8 @@ module.exports = {
   extends: [
     'airbnb-typescript/base',
     'prettier',
-    'prettier/@typescript-eslint',
   ],
-  plugins: ['prettier'],
+  plugins: ['prettier', 'import'],
   parserOptions: {
     project: './tsconfig.json',
     createDefaultProgram: true,

package.json

@@ -49,63 +49,64 @@
   },
   "homepage": "https://github.com/kotarella1110/cordova-plugin-webpack#readme",
   "dependencies": {
-    "@sindresorhus/is": "^4.0.1",
+    "@bpnetguy/webpack-inject-plugin": "^2.0.4",
+    "@sindresorhus/is": "^2.1.1",
+    "address": "^1.2.1",
     "create-html": "^4.1.0",
     "csp-parse": "0.0.2",
     "current-device": "^0.10.1",
     "elementtree": "^0.1.7",
     "express": "^4.17.1",
-    "glob": "^7.1.7",
+    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "glob": "^7.1.6",
     "is-ua-webview": "^1.0.5",
-    "react-dev-utils": "^11.0.4",
     "source-map-support": "^0.5.19",
-    "supports-color": "^8.1.1",
-    "webpack-inject-plugin": "^1.5.5",
-    "yargs": "^16.2.0",
-    "yargs-unparser": "^2.0.0"
+    "supports-color": "^7.1.0",
+    "yargs": "^15.3.1",
+    "yargs-unparser": "^1.5.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^12.1.4",
-    "@commitlint/config-conventional": "^13.1.0",
-    "@commitlint/prompt-cli": "^12.1.4",
-    "@types/elementtree": "^0.1.1",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^15.6.2",
-    "@types/react-dev-utils": "^9.0.7",
-    "@types/supports-color": "^8.1.1",
-    "@types/webpack": "^4.41.26",
-    "@types/webpack-dev-server": "^3.11.5",
-    "@types/yargs": "^15.0.11",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "all-contributors-cli": "^6.20.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "conventional-changelog-cli": "^2.1.1",
-    "conventional-github-releaser": "^3.1.5",
-    "cordova-set-version": "^12.0.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb-typescript": "^7.2.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-prettier": "^3.4.0",
-    "husky": "^7.0.1",
+    "@commitlint/cli": "^8.3.5",
+    "@commitlint/config-conventional": "^8.3.4",
+    "@commitlint/prompt-cli": "^8.3.5",
+    "@types/elementtree": "^0.1.0",
+    "@types/jest": "^25.2.2",
+    "@types/node": "^12.12.34",
+    "@types/react-dev-utils": "^9.0.11",
+    "@types/supports-color": "^5.3.0",
+    "@types/webpack": "^5.28.0",
+    "@types/webpack-dev-server": "^4.3.0",
+    "@types/yargs": "^15.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "all-contributors-cli": "^6.14.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "conventional-changelog-cli": "^2.0.34",
+    "cordova-set-version": "^9.1.6",
+    "eslint": "^8.27.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "husky": "^4.2.5",
     "install": "^0.13.0",
-    "jest": "^25.5.4",
-    "lint-staged": "^11.1.0",
+    "jest": "^29.2.2",
+    "lint-staged": "^10.2.2",
     "npm-check": "^5.9.2",
-    "prettier": "^2.3.2",
+    "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
-    "ts-jest": "^25.5.1",
-    "ts-loader": "^8.3.0",
-    "ts-node": "^10.1.0",
-    "typescript": "^3.9.10",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.2"
+    "ts-jest": "^29.0.3",
+    "ts-loader": "^9.4.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.8.4",
+    "webpack": "^5.57.1",
+    "webpack-cli": "^4.9.0",
+    "webpack-dev-server": "^4.3.1"
   },
   "peerDependencies": {
-    "webpack": "^4.0.0",
-    "webpack-cli": "^3.0.0",
-    "webpack-dev-server": "^3.0.0"
+    "webpack": "^5.57.1",
+    "webpack-cli": "^4.9.0",
+    "webpack-dev-server": "^4.3.1"
   },
   "husky": {
     "hooks": {

src/options/devServer.ts

@@ -1,3 +1,3 @@
-import options from 'webpack-dev-server/bin/options';
+import options = require('webpack-dev-server/lib/options.json')
 
 export default options;

src/options/webpack.ts

@@ -1,17 +1,14 @@
 // https://github.com/webpack/webpack-cli/blob/v3.3.9/bin/config/config-yargs.js
 import supportsColor from 'supports-color';
-import constants from 'webpack-cli/bin/utils/constants';
 
-const {
-  CONFIG_GROUP,
-  BASIC_GROUP,
-  MODULE_GROUP,
-  OUTPUT_GROUP,
-  ADVANCED_GROUP,
-  RESOLVE_GROUP,
-  OPTIMIZE_GROUP,
-  DISPLAY_GROUP,
-} = constants.GROUPS;
+const CONFIG_GROUP = "Config options:";
+const BASIC_GROUP = "Basic options:";
+const MODULE_GROUP = "Module options:";
+const OUTPUT_GROUP = "Output options:";
+const ADVANCED_GROUP = "Advanced options:";
+const RESOLVE_GROUP = "Resolving options:";
+const OPTIMIZE_GROUP = "Optimizing options:";
+const DISPLAY_GROUP = "Stats options:";
 
 const options = {
   config: {

src/utils/webpackHelpers.ts

@@ -1,7 +1,6 @@
 import { Arguments } from 'yargs';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
-import createDevServerConfig from 'webpack-dev-server/lib/utils/createConfig';
 import is from '@sindresorhus/is';
 
 export const defaultHost = '0.0.0.0';
@@ -42,11 +41,7 @@ export async function createConfig<T>(
   }
 
   if (argv) {
-    const options = createDevServerConfig(config, argv, {
-      port: defaultPort,
-    });
-    // host localhost to 0.0.0.0
-    return [config, options];
+    return [config, { argv }];
   }
 
   return config;

src/webpackCompile.ts

@@ -2,12 +2,10 @@ import 'source-map-support/register';
 import yargs from 'yargs';
 import yargsUnparser from 'yargs-unparser';
 import webpack from 'webpack';
-import convertArgv from 'webpack-cli/bin/utils/convert-argv';
+import WebpackCLI from 'webpack-cli';
 import is from '@sindresorhus/is';
 import { Context } from './types';
-// eslint-disable-next-line import/no-named-as-default
-import options from './options';
-import { createConfig } from './utils/webpackHelpers';
+import { options } from './options';
 import { createArguments, getVersion } from './utils/yargsHelpers';
 
 module.exports = async (ctx: Context) => {
@@ -42,21 +40,21 @@ module.exports = async (ctx: Context) => {
     .options(options.webpack) // set webpack yargs options
     .version(getVersion()).argv;
 
-  const customWebpackConfig = await createConfig(
-    convertArgv(webpackArgv), // create webpack configuration from yargs.argv and webpack.config.js
-  );
+  const webpackcli = new WebpackCLI()
+
+  const customWebpackConfig = await webpackcli.loadConfig({ argv: webpackArgv })
 
   const webpackConfig = ([] as webpack.Configuration[]).concat(
-    customWebpackConfig,
+    customWebpackConfig.options,
   );
   const compiler = webpack(webpackConfig);
-  await new Promise((resolve, reject) => {
+  await new Promise<void>((resolve, reject) => {
     compiler.run((err, stats) => {
       if (err) {
         reject(err);
       }
       console.log(
-        stats.toString({
+        stats?.toString({
           chunks: false,
           colors: true,
         }),