feat(deps): allow webpack v5 as a peer dependency (#10)

* [feat](deps) allow webpack v5 as a peer dependency * Add webpack v5 to CI tests Co-authored-by: Kevin Montag <[email protected]>
kmontag · Jul 17, 2022 · d768c6d · d768c6d
1 parent c32562c
commit d768c6d
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         node-version: [10.x, 12.x, 16.x, 18.x]
-        webpack-version: [2, 3, 4]
+        webpack-version: [2, 3, 4, 5]
 
     env:
       WEBPACK_VERSION: ${{ matrix.webpack-version }}

diff --git a/index.js b/index.js
@@ -29,18 +29,18 @@ module.exports = function(source) {
   let callback = this.async();
   let self = this;
 
-  const paths = this.options ? // for webpack@2 and webpack@3
-    // property loaderContext.options has been
-    // deprecated in webpack@3 and removed in webpack@4
-    (this.options.resolve || {}).modules
-    // for webpack@4
-    // but property this._compiler deprecated in webpack@3 too
-    : (this._compiler.options.resolve || {}).modules;
+  const paths = this.options ?
+    // For webpack@2 and webpack@3. property loaderContext.options
+    // was deprecated in webpack@3 and removed in webpack@4.
+    (this.options.resolve || {}).modules :
+    // For webpack@4 and webpack@5. The `_compiler` property is
+    // deprecated, but still works as of webpack@5.
+    (this._compiler.options.resolve || {}).modules;
 
   const options = Object.assign({
     json: false,
 
-    // Default to the paths given to the compiler
+    // Default to the paths given to the compiler.
     paths: paths || [],
 
     pbjsArgs: [],

diff --git a/package.json b/package.json
@@ -37,10 +37,11 @@
     "uglify-loader": "^2.0.0",
     "webpack2": "npm:webpack@^2.0.0",
     "webpack3": "npm:webpack@^3.0.0",
-    "webpack": "^4.0.0"
+    "webpack4": "npm:webpack@^4.0.0",
+    "webpack": "^5.0.0"
   },
   "peerDependencies": {
-    "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
+    "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
   },
   "repository": {
     "type": "git",

diff --git a/test/helpers/compile.js b/test/helpers/compile.js
@@ -12,6 +12,9 @@ const webpack = (function() {
     case '3':
       return require('webpack3');
       break;
+    case '4':
+      return require('webpack4');
+      break;
     default:
       return require('webpack');
       break;
@@ -23,6 +26,7 @@ const fixturePath = path.resolve(__dirname, '..', 'fixtures');
 // The config object needs to look slightly different depending on the
 // version of webpack that we're testing with.
 const isWebpack4Plus = ('version' in webpack);
+const isWebpack5 = isWebpack4Plus && webpack.version.substring(0, 2) === '5.';
 
 module.exports = function (fixture, loaderOpts, webpackOpts) {
   webpackOpts = (webpackOpts || {});
@@ -55,7 +59,16 @@ module.exports = function (fixture, loaderOpts, webpackOpts) {
           }]
         }],
       }
-    }, isWebpack4Plus ? { mode: 'none' } : {}, webpackOpts));
+    },
+    // webpack@4 adds the `mode` configuration option, which adds some
+    // additional config defaults that we want to avoid for
+    // consistency.
+    isWebpack4Plus ? { mode: 'none' } : {},
+    // Make sure to test webpack@5 without backwards-compatibility
+    // enabled. See
+    // https://webpack.js.org/configuration/experiments/#experimentsbackcompat.
+    isWebpack5 ? { experiments: { backCompat: false } } : {},
+    webpackOpts));
 
     let fs = new MemoryFS();
     compiler.outputFileSystem = fs;