fix: HotModuleReplacementPlugin warning message on webpack v5 (#206)

* fix hotUpdateMainFilename webpack's error message

* fix tests

* add getMajorVersion

Author: AlexSergey

lib/helpers.js

@@ -0,0 +1,4 @@
+module.exports = {
+  getMajorVersion: (version) =>
+    typeof version === 'string' && version.includes('.') ? version.split('.')[0] : false
+};

lib/plugins/hmr.js

@@ -8,7 +8,9 @@
   The above copyright notice and this permission notice shall be
   included in all copies or substantial portions of this Source Code Form.
 */
-const { HotModuleReplacementPlugin } = require('webpack');
+const { HotModuleReplacementPlugin, version } = require('webpack');
+
+const { getMajorVersion } = require('../helpers');
 
 const { PluginExistsError } = require('../errors');
 
@@ -18,10 +20,17 @@ const addPlugin = (compiler) => {
 };
 
 const init = function init(compiler, log) {
+  const webpackMajorVersion = getMajorVersion(version);
   // eslint-disable-next-line no-param-reassign
   compiler.options.output = Object.assign(compiler.options.output, {
-    hotUpdateChunkFilename: `${compiler.wpsId}-[id]-wps-hmr.js`,
-    hotUpdateMainFilename: `${compiler.wpsId}-wps-hmr.json`
+    hotUpdateChunkFilename:
+      webpackMajorVersion >= 5
+        ? `[runtime]-${compiler.wpsId}-[id]-wps-hmr.js`
+        : `${compiler.wpsId}-[id]-wps-hmr.js`,
+    hotUpdateMainFilename:
+      webpackMajorVersion >= 5
+        ? `[runtime]-${compiler.wpsId}-wps-hmr.json`
+        : `${compiler.wpsId}-wps-hmr.json`
   });
 
   const hasHMRPlugin = compiler.options.plugins.some(

package.json

@@ -16,7 +16,7 @@
     "ci:coverage": "nyc npm run test && nyc report --reporter=text-lcov > coverage.lcov",
     "ci:lint": "npm run lint && npm run security",
     "ci:lint:commits": "commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}",
-    "ci:test": "npm run test -- --verbose",
+    "ci:test": "npm run test -- --verbose --timeout=30000",
     "commitlint": "commitlint",
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "dev": "npm run dev:clean && node node_modules/webpack-nano/bin/wp --config test/fixtures/simple/webpack.config.js",

test/helpers.test.js

@@ -0,0 +1,13 @@
+const test = require('ava');
+
+const { getMajorVersion } = require('../lib/helpers');
+
+test('Get major version with correct value', (t) => {
+  const majorVersion = getMajorVersion('5.2.3');
+  t.true(majorVersion === '5');
+});
+
+test('Get major version with incorrect value', (t) => {
+  const majorVersion = getMajorVersion('5');
+  t.true(majorVersion === false);
+});