Add support for Webpack 4 (in addition to 3 & prior)

Author: developit

package.json

@@ -27,6 +27,7 @@
     "eslint": "^4.16.0",
     "eslint-config-developit": "^1.1.1",
     "microbundle": "^0.4.3",
+    "webpack": "^4.14.0",
     "workerize-loader": "^1.0.1"
   },
   "dependencies": {
@@ -48,7 +49,9 @@
     "karma-webpack": "2.0.7",
     "puppeteer": "^1.0.0",
     "sade": "^1.3.1",
-    "script-loader": "^0.7.2",
-    "webpack": "^3.10.0"
+    "script-loader": "^0.7.2"
+  },
+  "peerDependencies": {
+    "webpack": ">=4"
   }
 }

src/configure.js

@@ -5,6 +5,9 @@ import { moduleDir, tryRequire, dedupe, cleanStack, readFile, readDir } from './
 import babelLoader from './lib/babel-loader';
 import cssLoader from './lib/css-loader';
 
+const WEBPACK_VERSION = String(require('webpack').version || '3.0.0');
+const WEBPACK_MAJOR = WEBPACK_VERSION.split('.')[0]|0;
+
 export default function configure(options) {
 	let cwd = process.cwd(),
 		res = file => path.resolve(cwd, file);
@@ -102,7 +105,7 @@ export default function configure(options) {
 		return Object.assign({}, configured || {}, value);
 	}
 
-	return {
+	let generatedConfig = {
 		basePath: cwd,
 		plugins: PLUGINS.map(require.resolve),
 		frameworks: ['jasmine'],
@@ -152,8 +155,10 @@ export default function configure(options) {
 
 		webpack: {
 			devtool: 'cheap-module-eval-source-map',
+			mode: webpackConfig.mode || 'development',
 			module: {
-				loaders: loaders.concat(
+				// @TODO check webpack version and use loaders VS rules as the key here appropriately:
+				rules: loaders.concat(
 					!getLoader( rule => `${rule.use},${rule.loader}`.match(/\bbabel-loader\b/) ) && babelLoader(options),
 					!getLoader('foo.css') && cssLoader(options)
 				).filter(Boolean)
@@ -199,4 +204,13 @@ export default function configure(options) {
 			}
 		}
 	};
+
+	if (WEBPACK_MAJOR < 4) {
+		delete generatedConfig.webpack.mode;
+		let { rules } = generatedConfig.webpack.module;
+		delete generatedConfig.webpack.module.rules;
+		generatedConfig.webpack.module.loaders = rules;
+	}
+
+	return generatedConfig;
 }

test/fixture.worker.js

@@ -1,3 +1,3 @@
-export function foo() {
+export async function foo() {
 	return 1;
 }

test/index.test.js

@@ -1,3 +1,5 @@
+import worker from 'workerize-loader!./fixture.worker.js';
+
 const sleep = ms => new Promise( r => setTimeout(r, ms) );
 
 describe('demo', () => {
@@ -18,9 +20,8 @@ describe('demo', () => {
 	});
 
 	it('should do MAGIC', async () => {
-		let lib = await import('workerize-loader!./fixture.worker.js');
-		expect(lib).toEqual(jasmine.any(Function));
-		let mod = lib();
+		let mod = worker();
+		expect(mod.foo).toEqual(jasmine.any(Function));
 		expect(await mod.foo()).toEqual(1);
 	});
 });