Merge pull request #236 from izaera/IFI-2123

feat: support for webpack 5 in npm-scripts/bundler
liferay · Nov 16, 2020 · dc9610e · dc9610e
2 parents 32b5848 + fcab595
commit dc9610e
Show file tree

Hide file tree

Showing 14 changed files with 484 additions and 3,788 deletions.
diff --git a/maintenance/projects/js-toolkit/qa/samples/packages/alias-test/package.json b/maintenance/projects/js-toolkit/qa/samples/packages/alias-test/package.json
@@ -13,7 +13,7 @@
 		"colors": "^1.4.0",
 		"diff": "^4.0.1",
 		"rimraf": "^3.0.0",
-		"webpack": "^4.41.2",
-		"webpack-cli": "^3.3.9"
+		"webpack": "^5.4.0",
+		"webpack-cli": "^4.2.0"
 	}
 }
diff --git a/maintenance/projects/js-toolkit/qa/samples/packages/loaders/package.json b/maintenance/projects/js-toolkit/qa/samples/packages/loaders/package.json
@@ -4,9 +4,9 @@
 	"description": "Loaders",
 	"devDependencies": {
 		"copy-webpack-plugin": "4.6.0",
-		"webpack": "4.29.6",
-		"webpack-cli": "3.3.0",
-		"webpack-dev-server": "3.2.1"
+		"webpack": "^5.4.0",
+		"webpack-cli": "^4.2.0",
+		"webpack-dev-server": "^3.11.0"
 	},
 	"dependencies": {},
 	"scripts": {

diff --git a/package.json b/package.json
@@ -13,7 +13,6 @@
 		"@types/estree": "0.0.45",
 		"@types/fs-extra": "9.0.1",
 		"@types/jest": "^26.0.14",
-		"@types/webpack": "4.41.22",
 		"@types/yeoman-generator": "4.11.2",
 		"@typescript-eslint/parser": "4.3.0",
 		"babel-eslint": "10.1.0",
@@ -29,12 +28,12 @@
 		"mem-fs": "^1.2.0",
 		"mem-fs-editor": "^7.0.1",
 		"prettier": "2.1.2",
+		"terser-webpack-plugin": "^5.0.3",
 		"ts-jest": "^26.4.1",
 		"typescript": "^4.0.3",
-		"uglifyjs-webpack-plugin": "^2.2.0",
-		"webpack": "^4.39.1",
-		"webpack-cli": "^3.3.6",
-		"webpack-dev-server": "^3.7.2",
+		"webpack": "^5.4.0",
+		"webpack-cli": "^4.2.0",
+		"webpack-dev-server": "^3.11.0",
 		"xml-js": "^1.6.11",
 		"yo": "^3.1.1"
 	},

diff --git a/projects/amd-loader/bin/build-loader.js b/projects/amd-loader/bin/build-loader.js
@@ -5,6 +5,6 @@
 
 const {run} = require('./util');
 
-run('webpack', '--env.flavor=debug');
-run('webpack', '--env.flavor=prod');
-run('webpack', '--env.flavor=min');
+run('webpack', '--env', 'flavor=debug');
+run('webpack', '--env', 'flavor=prod');
+run('webpack', '--env', 'flavor=min');
diff --git a/projects/amd-loader/webpack.config.js b/projects/amd-loader/webpack.config.js
@@ -4,7 +4,7 @@
  */
 
 const path = require('path');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = ({flavor}) => {
 	const baseConfig = {
@@ -36,12 +36,11 @@ module.exports = ({flavor}) => {
 		},
 		min: {
 			mode: 'production',
+			optimization: {
+				minimize: true,
+				minimizer: [new TerserPlugin()],
+			},
 			output: {...baseConfig.output, filename: 'loader-min.js'},
-			plugins: [
-				new UglifyJsPlugin({
-					sourceMap: true,
-				}),
-			],
 		},
 		prod: {
 			mode: 'production',

diff --git a/projects/js-toolkit/packages/js-toolkit-core/package.json b/projects/js-toolkit/packages/js-toolkit-core/package.json
@@ -13,7 +13,7 @@
 		"read-json-sync": "^2.0.1",
 		"resolve": "^1.8.1",
 		"source-map": "^0.7.3",
-		"webpack": "^4.41.6"
+		"webpack": "^5.4.0"
 	},
 	"description": "Utility library for Liferay NPM Build Tools.",
 	"license": "LGPL-3.0",

diff --git a/projects/js-toolkit/packages/js-toolkit-core/src/project/Probe.ts b/projects/js-toolkit/packages/js-toolkit-core/src/project/Probe.ts
@@ -48,7 +48,8 @@ export default class Probe {
 		if (
 			this._hasDependency('@liferay/npm-bundler') ||
 			this._hasDependency('@liferay/js-toolkit-scripts') ||
-			this._hasScriptCalling('js-toolkit')
+			this._hasScriptCalling('js-toolkit') ||
+			this._hasScriptCalling('liferay-npm-bundler')
 		) {
 			return ProjectType.BUNDLER;
 		}

diff --git a/projects/js-toolkit/packages/npm-bundler/package.json b/projects/js-toolkit/packages/npm-bundler/package.json
@@ -16,7 +16,7 @@
 		"pretty-time": "^1.1.0",
 		"read-json-sync": "^2.0.1",
 		"source-map": "^0.7.3",
-		"webpack": "^4.41.6",
+		"webpack": "^5.4.0",
 		"xml-js": "^1.6.8",
 		"yargs": "^14.0.0"
 	},

diff --git a/projects/js-toolkit/packages/npm-bundler/src/adapt/bundler-project/index.ts b/projects/js-toolkit/packages/npm-bundler/src/adapt/bundler-project/index.ts
@@ -74,7 +74,7 @@ async function transformBundles(): Promise<void> {
 		const sourceFile = bundlerWebpackDir.join(fileName);
 
 		if (!fs.existsSync(sourceFile.asNative)) {
-			break;
+			continue;
 		}
 
 		const destFile = project.outputDir.join(fileName);

diff --git a/projects/js-toolkit/packages/npm-bundler/src/bundle/index.ts b/projects/js-toolkit/packages/npm-bundler/src/bundle/index.ts
@@ -4,7 +4,6 @@
  */
 
 import {ProjectType} from '@liferay/js-toolkit-core';
-import fs from 'fs-extra';
 import webpack from 'webpack';
 
 import adaptBundlerProject from '../adapt/bundler-project';
@@ -63,27 +62,23 @@ function runWebpack(options: webpack.Configuration): Promise<webpack.Stats> {
 	return new Promise((resolve, reject) => {
 		const compiler = webpack(options);
 
-		compiler.run((err, stats) => {
-			if (err) {
-				reject(err);
+		compiler.hooks.done.tap('npm-bundler', (stats) => {
+			if (stats.hasErrors()) {
+				reject(new Error('Webpack execution failed'));
 			}
 			else {
 				resolve(stats);
 			}
 		});
+
+		compiler.run(undefined);
 	});
 }
 
 function writeResults(stats: webpack.Stats): void {
 	const {compilation} = stats;
 
-	Object.entries(compilation.assets as object).forEach(
-		([fileName, source]) => {
-			const filePath = bundlerWebpackDir.join(fileName).asNative;
-
-			fs.writeFileSync(filePath, source.source());
-
-			log.debug(`Emitted file ${filePath}`);
-		}
-	);
+	Object.keys(compilation.assets as object).forEach((fileName) => {
+		log.debug(`Emitted file ${bundlerWebpackDir.join(fileName).asNative}`);
+	});
 }
diff --git a/projects/js-toolkit/resources/devtools/link-js-toolkit/util.js b/projects/js-toolkit/resources/devtools/link-js-toolkit/util.js
@@ -10,9 +10,9 @@ const fs = require('fs-extra');
 const path = require('path');
 const readJsonSync = require('read-json-sync');
 
-const toolkitProjectNames = fs.readdirSync(
-	path.join(__dirname, '..', '..', '..', 'packages')
-);
+const toolkitProjectNames = fs
+	.readdirSync(path.join(__dirname, '..', '..', '..', 'packages'))
+	.map((dir) => `@liferay/${dir}`);
 
 function isToolkitDep(pkgName) {
 	return toolkitProjectNames.indexOf(pkgName) != -1;

diff --git a/projects/npm-tools/packages/npm-scripts/package.json b/projects/npm-tools/packages/npm-scripts/package.json
@@ -17,12 +17,6 @@
 		"@liferay/eslint-config": "21.2.1",
 		"@liferay/jest-junit-reporter": "1.2.0",
 		"@liferay/npm-bundler-preset-liferay-dev": "4.6.5",
-		"@storybook/addon-a11y": "^5.1.9",
-		"@storybook/addon-actions": "^5.1.9",
-		"@storybook/addon-knobs": "^5.1.9",
-		"@storybook/addon-viewport": "^5.1.9",
-		"@storybook/core": "5.3.3",
-		"@storybook/react": "^5.1.9",
 		"@testing-library/dom": "^5.6.1",
 		"@testing-library/jest-dom": "^4.2.4",
 		"@testing-library/react": "^8.0.9",
@@ -68,9 +62,9 @@
 		"stylelint": "^13.2.0",
 		"ts-loader": "^8.0.4",
 		"typescript": "^4.0.3",
-		"webpack": "^4.39.1",
-		"webpack-cli": "^3.3.6",
-		"webpack-dev-server": "^3.7.2"
+		"webpack": "^5.4.0",
+		"webpack-cli": "^4.2.0",
+		"webpack-dev-server": "^3.11.0"
 	},
 	"description": "Collection of NPM scripts used in Liferay DXP",
 	"files": [

diff --git a/projects/npm-tools/packages/npm-scripts/src/index.js b/projects/npm-tools/packages/npm-scripts/src/index.js
@@ -30,7 +30,21 @@ module.exports = async function () {
 		},
 
 		storybook() {
-			require('./scripts/storybook')();
+
+			// Storybook is temporarily disabled until it supports webpack 5
+			// require('./scripts/storybook')();
+
+			/* eslint-disable-next-line no-console */
+			console.log(`
+			
+	WARNING:
+
+	Storybook has been temporarily disabled because it does not support 
+	webpack 5.
+
+	See https://bit.ly/35zFX4E for more information.
+
+`);
 		},
 
 		test() {