fix: webpack v5 support (#22)

* fix: Fix webpack 5 watch related warning

Closes #40.

* chore: Add webpack 5 checks

* Update lib/compiler.js

Co-authored-by: Andrew Powell <shellscape@users.noreply.github.com>

* fix: Move function earlier

* chore: update nvmrc, add v5 test scripts

* fix: Fix tests

I kept it simple and extracted a subset that's the same for 4 and 5.

* fix: Fix cleanup

* Update package.json

Co-authored-by: Andrew Powell <shellscape@users.noreply.github.com>

* chore: Simplify tests

I found a way to run snapshots for both 4 and 5 in the same file.

* chore: Drop a redundant snapshot

* chore: Update snapshots

Co-authored-by: Andrew Powell <shellscape@users.noreply.github.com>
Co-authored-by: shellscape <andrew@shellscape.org>

Author: bebraw

.nvmrc

@@ -1 +1 @@
-10.14.1
+14

lib/compiler.js

@@ -11,7 +11,16 @@
 const chalk = require('chalk');
 const webpack = require('webpack');
 
+const isWebpack5 = () => webpack.version.split('.')[0] === '5';
+
 const run = ({ config, emitJson, watchConfig }, log) => {
+  // Delete possible watch flag from webpack configuration as that triggers a
+  // faulty condition in webpack 5. #20
+  if (isWebpack5()) {
+    // eslint-disable-next-line no-param-reassign
+    delete config.watch;
+  }
+
   let lastHash;
   const compiler = webpack(config);
 
@@ -25,7 +34,8 @@ const run = ({ config, emitJson, watchConfig }, log) => {
       return;
     }
 
-    if (lastHash === stats.hash) {
+    // Skip duplicate hash check in webpack 5. #20
+    if (!isWebpack5() && lastHash === stats.hash) {
       log.info(chalk`{dim ⁿᵃⁿᵒ} Duplicate build detected {dim (${lastHash})}\n`);
       return;
     }
@@ -60,4 +70,4 @@ const run = ({ config, emitJson, watchConfig }, log) => {
   }
 };
 
-module.exports = { run };
+module.exports = { isWebpack5, run };

package.json

@@ -23,7 +23,10 @@
     "lint": "eslint --fix --cache bin/* lib test argv.js",
     "lint-staged": "lint-staged",
     "security": "npm audit",
-    "test": "ava"
+    "test": "npm run test:v4 && npm run test:v5 && npm run test:cleanup",
+    "test:cleanup": "npm install webpack@^4.42.0 --no-save",
+    "test:v4": "ava",
+    "test:v5": "npm install webpack@^5.0.0 --no-save && ava"
   },
   "files": [
     "bin/",
@@ -34,7 +37,7 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "webpack": "^4.20.2"
+    "webpack": ">=4.0.0"
   },
   "dependencies": {
     "chalk": "^4.1.0",

test/snapshots/test.js.md

@@ -37,7 +37,96 @@ Generated by [AVA](https://avajs.dev).
       _: [],
     }
 
-## json
+## json - webpack 5
+
+> Snapshot 1
+
+    {
+      assets: [
+        {
+          auxiliaryChunkIdHints: [],
+          auxiliaryChunkNames: [],
+          auxiliaryChunks: [],
+          cached: false,
+          chunkIdHints: [],
+          chunkNames: [
+            'main',
+          ],
+          chunks: [
+            'main',
+          ],
+          comparedForEmit: true,
+          emitted: false,
+          info: {
+            size: 2196,
+          },
+          isOverSizeLimit: false,
+          name: 'main.js',
+          related: {},
+          size: 2196,
+          type: 'asset',
+        },
+      ],
+      assetsByChunkName: {
+        main: [
+          'main.js',
+        ],
+      },
+      children: [],
+      entrypoints: {
+        main: {
+          assets: [
+            {
+              name: 'main.js',
+              size: 2196,
+            },
+          ],
+          assetsSize: 2196,
+          auxiliaryAssets: [],
+          auxiliaryAssetsSize: 0,
+          childAssets: {},
+          children: {},
+          chunks: [
+            'main',
+          ],
+          filteredAssets: 0,
+          filteredAuxiliaryAssets: 0,
+          isOverSizeLimit: false,
+          name: 'main',
+        },
+      },
+      errors: [],
+      errorsCount: 0,
+      hash: '30f993fdf21d4d672d17',
+      namedChunkGroups: {
+        main: {
+          assets: [
+            {
+              name: 'main.js',
+              size: 2196,
+            },
+          ],
+          assetsSize: 2196,
+          auxiliaryAssets: [],
+          auxiliaryAssetsSize: 0,
+          childAssets: {},
+          children: {},
+          chunks: [
+            'main',
+          ],
+          filteredAssets: 0,
+          filteredAuxiliaryAssets: 0,
+          isOverSizeLimit: false,
+          name: 'main',
+        },
+      },
+      publicPath: 'auto',
+      version: '5.1.3',
+      warnings: [],
+      warningsCount: 0,
+    }
+
+## json - webpack 4
 
 > Snapshot 1
 

test/snapshots/test.js.snap

@@ -4,6 +4,8 @@ const test = require('ava');
 const execa = require('execa');
 const deferred = require('p-defer');
 
+const { isWebpack5 } = require('../lib/compiler');
+
 const bin = resolve(__dirname, '../bin/wp.js');
 const cwd = resolve(__dirname, './fixtures');
 
@@ -52,7 +54,8 @@ test('bad', async (t) => {
   try {
     await run('--config', 'bad.config.js');
   } catch (err) {
-    t.truthy(err.stderr.includes('WebpackOptionsValidationError'));
+    // Same subset for webpack 4 and 5
+    t.truthy(err.stderr.includes('ValidationError'));
   }
 });
 
@@ -98,13 +101,45 @@ test('multi', async (t) => {
 
 test('stats', async (t) => {
   const { stderr } = await run('--config', 'stats.config.js');
-  t.snapshot(stderr);
+
+  if (isWebpack5()) {
+    t.truthy(stderr.includes('webpack: 1 asset'));
+  } else {
+    // Webpack 4
+    t.snapshot(stderr);
+  }
 });
 
-test('json', async (t) => {
+test('json - webpack 4', async (t) => {
   const { stdout } = await run('--config', 'stats.config.js', '--json');
   const stats = JSON.parse(stdout);
 
+  if (isWebpack5()) {
+    t.truthy(true);
+
+    return;
+  }
+
+  // Remove times since those are transient
+  delete stats.time;
+  delete stats.builtAt;
+  delete stats.outputPath;
+  delete stats.chunks;
+  delete stats.modules;
+
+  t.snapshot(stats);
+});
+
+test('json - webpack 5', async (t) => {
+  const { stdout } = await run('--config', 'stats.config.js', '--json');
+  const stats = JSON.parse(stdout);
+
+  if (!isWebpack5()) {
+    t.truthy(true);
+
+    return;
+  }
+
   // Remove times since those are transient
   delete stats.time;
   delete stats.builtAt;