Webpack 5

package.json

@@ -38,7 +38,7 @@
     "serve": "serve -p 9999",
     "test:ci": "run-p --race serve test",
     "test:cypress": "cypress run",
-    "test": "run-s build artifact:package artifact:install build intern artifact:build:* test:cypress",
+    "test": "run-s build artifact:package artifact:install artifact:build:* test:cypress",
     "uploadCoverage": "codecov --file=coverage/coverage.json",
     "watch:ts": "dojo-tsc-watcher -p tsconfig.json -- dojo-package",
     "watch": "run-p watch:ts \"build:static:** -- --watch\""
@@ -60,24 +60,21 @@
   "devDependencies": {
     "@dojo/cli": "~7.0.0",
     "@dojo/scripts": "~4.0.2",
-    "@types/clean-webpack-plugin": "0.1.2",
     "@types/compression": "0.0.36",
     "@types/connect-history-api-fallback": "1.3.1",
-    "@types/copy-webpack-plugin": "4.4.1",
     "@types/cssnano": "4.0.0",
     "@types/execa": "0.8.0",
     "@types/express": "4.11.0",
+    "@types/webpack-manifest-plugin": "2.1.0",
     "@types/express-serve-static-core": "4.16.4",
     "@types/globby": "6.1.0",
     "@types/gzip-size": "4.0.0",
-    "@types/html-webpack-plugin": "3.2.0",
     "@types/http-proxy-middleware": "^0.17.5",
     "@types/jquery": "3.3.29",
     "@types/jsonfile": "4.0.1",
     "@types/loader-utils": "1.1.3",
     "@types/log-symbols": "2.0.0",
     "@types/log-update": "2.0.0",
-    "@types/mini-css-extract-plugin": "0.2.0",
     "@types/minimatch": "3.0.3",
     "@types/mockery": "1.4.29",
     "@types/node": "~9.6.5",
@@ -86,8 +83,6 @@
     "@types/sinon": "~4.3.3",
     "@types/strip-ansi": "3.0.0",
     "@types/tapable": "1.0.4",
-    "@types/webpack": "4.4.32",
-    "@types/webpack-manifest-plugin": "1.3.2",
     "@types/yargs": "10.0.0",
     "codecov": "~3.0.4",
     "cpx": "~1.5.0",
@@ -105,17 +100,18 @@
     "tslint": "5.18.0"
   },
   "dependencies": {
-    "@dojo/webpack-contrib": "8.0.0-alpha.1",
+    "@dojo/webpack-contrib": "file:~/Projects/opensource/webpack-contrib/dist/release/dojo-webpack-contrib-8.0.0-pre.tgz",
     "@typescript-eslint/eslint-plugin": "2.34.0",
     "@typescript-eslint/parser": "2.34.0",
     "caniuse-lite": "1.0.30000973",
     "chalk": "2.4.1",
-    "clean-webpack-plugin": "1.0.0",
+    "clean-webpack-plugin": "3.0.0",
     "cli-columns": "3.1.2",
     "compression": "1.7.4",
     "compression-webpack-plugin": "4.0.0",
     "connect-history-api-fallback": "1.5.0",
     "connect-inject": "0.4.0",
+    "copy-webpack-plugin": "6.1.0",
     "css-loader": "1.0.1",
     "css-url-relative-plugin": "1.0.0",
     "cssnano": "4.1.7",
@@ -130,41 +126,42 @@
     "globby": "7.1.1",
     "gzip-size": "4.1.0",
     "html-loader": "0.5.5",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "4.4.1",
     "http-proxy-middleware": "0.19.0",
     "identity-loader": "1.0.1",
     "image-webpack-loader": "6.0.0",
-    "imports-loader": "0.8.0",
+    "imports-loader": "1.1.0",
     "istanbul-instrumenter-loader": "3.0.1",
     "json-css-module-loader": "1.0.2",
     "jsonfile": "4.0.0",
     "loader-utils": "1.1.0",
     "log-symbols": "2.1.0",
     "log-update": "2.3.0",
-    "mini-css-extract-plugin": "0.4.2",
+    "mini-css-extract-plugin": "0.11.0",
     "minimatch": "3.0.4",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "ora": "1.3.0",
     "pkg-dir": "2.0.0",
     "postcss-import": "12.0.0",
     "postcss-loader": "3.0.0",
     "postcss-preset-env": "6.7.0",
+    "schema-utils": "2.7.1",
     "slash": "1.0.0",
     "source-map-loader-cli": "0.0.1",
     "strip-ansi": "3.0.1",
     "stylelint": "9.10.1",
     "stylelint-webpack-plugin": "0.10.5",
     "terser-webpack-plugin": "1.1.0",
-    "ts-loader": "5.3.0",
+    "ts-loader": "8.0.3",
     "ts-node": "7.0.1",
     "tsconfig-paths-webpack-plugin": "3.2.0",
     "typed-css-modules": "0.3.1",
     "umd-compat-loader": "2.1.1",
-    "webpack": "4.25.1",
+    "webpack": "5.0.0-beta.31",
     "webpack-hot-middleware": "2.24.3",
-    "webpack-manifest-plugin": "2.0.4",
+    "webpack-manifest-plugin": "3.0.0-rc.0",
     "webpack-mild-compile": "3.3.1",
-    "webpack-pwa-manifest": "3.7.1",
+    "webpack-pwa-manifest": "4.2.0",
     "wrapper-webpack-plugin": "2.0.0"
   }
 }

src/base.config.ts

@@ -13,6 +13,8 @@ import * as cssnano from 'cssnano';
 import * as minimatch from 'minimatch';
 import * as ManifestPlugin from 'webpack-manifest-plugin';
 import * as globby from 'globby';
+import { RuleSetRule } from 'webpack';
+import HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const CssUrlRelativePlugin = require('css-url-relative-plugin');
 const postcssPresetEnv = require('postcss-preset-env');
@@ -182,7 +184,7 @@ export class InsertScriptPlugin {
 
 	apply(compiler: any) {
 		compiler.hooks.compilation.tap('InsertScriptPlugin', (compilation: any) => {
-			compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync(
+			HtmlWebpackPlugin.getHooks(compilation).afterTemplateExecution.tapAsync(
 				'InsertScriptPlugin',
 				(data: any, cb: Function) => {
 					this._options.forEach(({ content, type }) => {
@@ -320,7 +322,7 @@ export default function webpackConfigFactory(args: any): webpack.Configuration {
 		}
 	};
 
-	const postCssModuleLoader = [
+	const postCssModuleLoader: RuleSetRule['use'] = [
 		MiniCssExtractPlugin.loader,
 		'@dojo/webpack-contrib/css-module-decorator-loader',
 		{
@@ -334,7 +336,7 @@ export default function webpackConfigFactory(args: any): webpack.Configuration {
 		}
 	];
 
-	const cssLoader = [
+	const cssLoader: RuleSetRule['use'] = [
 		MiniCssExtractPlugin.loader,
 		{
 			loader: 'css-loader',
@@ -347,15 +349,17 @@ export default function webpackConfigFactory(args: any): webpack.Configuration {
 
 	if (!isExperimentalSpeed || isLegacy) {
 		postCssModuleLoader.push({
-			loader: 'postcss-loader?sourceMap',
+			loader: 'postcss-loader',
 			options: {
+				sourceMap: true,
 				ident: 'postcss',
 				plugins: [postcssImport(postcssImportConfig), postcssPresetEnv(postcssPresetConfig)]
 			}
 		});
 		cssLoader.push({
-			loader: 'postcss-loader?sourceMap',
+			loader: 'postcss-loader',
 			options: {
+				sourceMap: true,
 				ident: 'postcss',
 				plugins: [postcssImport(postcssImportConfig), postcssPresetEnv(postcssPresetConfig)]
 			}
@@ -365,9 +369,10 @@ export default function webpackConfigFactory(args: any): webpack.Configuration {
 	const config: webpack.Configuration = {
 		mode: 'development',
 		externals: [
-			function(context, request, callback) {
+			function(data: { context: string; request: string }, callback: (err: Error | null, result: any) => void) {
+				const { request } = data;
 				const externals = (args.externals && args.externals.dependencies) || [];
-				function resolveExternal(externals: (string | { name?: string; type?: string })[]): string | void {
+				function resolveExternal(externals: (string | { name?: string; type?: string })[]) {
 					for (let external of externals) {
 						const name = external && (typeof external === 'string' ? external : external.name);
 						if (name && new RegExp(`^${name}[!(\/|\\)]?`).test(request)) {
@@ -389,21 +394,12 @@ export default function webpackConfigFactory(args: any): webpack.Configuration {
 			}
 		],
 		entry,
-		node: {
-			dgram: 'empty',
-			net: 'empty',
-			tls: 'empty',
-			fs: 'empty',
-			process: false,
-			Buffer: false,
-			setImmediate: false
-		},
 		output: {
 			chunkFilename: '[name].js',
 			library: `lib_${libraryName}`,
 			umdNamedDefine: true,
 			filename: '[name].js',
-			jsonpFunction: `dojoWebpackJsonp${libraryName}`,
+			uniqueName: `dojoWebpack${libraryName}`,
 			libraryTarget: 'umd',
 			path: path.resolve('./output')
 		},
@@ -416,19 +412,20 @@ export default function webpackConfigFactory(args: any): webpack.Configuration {
 			plugins: [new TsconfigPathsPlugin({ configFile: path.join(basePath, 'tsconfig.json') })]
 		},
 		optimization: {
-			noEmitOnErrors: false,
+			emitOnErrors: true,
 			splitChunks: singleBundle
 				? {}
 				: {
 						cacheGroups: {
 							default: false,
-							vendors: false,
+							defaultVendors: false,
 							main: {
 								chunks: 'all',
 								minChunks: 1,
 								name: exports.mainEntry,
 								reuseExistingChunk: true,
-								test: (module: any, chunks: any) => {
+								test: (module: any, chunkSet: any) => {
+									const chunks: any[] = Array.from(chunkSet);
 									if (chunks.length === 1 && chunks[0].name === 'main') {
 										return true;
 									}
@@ -456,8 +453,9 @@ export default function webpackConfigFactory(args: any): webpack.Configuration {
 						}
 				  }
 		},
-		devtool: 'source-map',
-		watchOptions: { ignored: /node_modules/ },
+		// TODO - revisit source map issue. beta 31 broke 'eval' for dev build
+		devtool: args.mode === 'dev' ? false : 'source-map',
+		watchOptions: { ignored: 'node_modules' },
 		plugins: removeEmpty([
 			new StyleLintPlugin({
 				config: {
@@ -551,6 +549,12 @@ export default function webpackConfigFactory(args: any): webpack.Configuration {
 			// `file` uses the pattern `loaderPath!filePath`, hence the regex test
 			noParse: (file: string) => assetsDirPattern.test(file),
 			rules: removeEmpty([
+				{
+					test: /\.m?js/,
+					resolve: {
+						fullySpecified: false
+					}
+				},
 				{
 					test: indexHtmlPattern,
 					use: {
@@ -563,7 +567,11 @@ export default function webpackConfigFactory(args: any): webpack.Configuration {
 				{
 					test: /\.(css|js)$/,
 					issuer: indexHtmlPattern,
-					loader: `file-loader?digest=hex&name=[path][name].[ext]`
+					loader: 'file-loader',
+					options: {
+						digest: 'hex',
+						name: '[path][name].[ext]'
+					}
 				},
 				esLint && {
 					include: allPaths,
@@ -595,7 +603,10 @@ export default function webpackConfigFactory(args: any): webpack.Configuration {
 					include: allPaths,
 					test: /\.ts(x)?$/,
 					enforce: 'pre',
-					loader: '@dojo/webpack-contrib/css-module-dts-loader?type=ts&instanceName=0_dojo'
+					loader: '@dojo/webpack-contrib/css-module-dts-loader',
+					options: {
+						type: 'ts&instanceName=0_dojo'
+					}
 				},
 				{
 					include: allPaths,
@@ -638,11 +649,18 @@ export default function webpackConfigFactory(args: any): webpack.Configuration {
 				{
 					include: [/@dojo/, /globalize/],
 					test: new RegExp(`globalize(\\${path.sep}|$)`),
-					loader: 'imports-loader?define=>false'
+					loader: 'imports-loader',
+					options: {
+						additionalCode: 'var define = false;'
+					}
 				},
 				{
 					test: /\.(gif|png|jpe?g|svg|eot|ttf|woff|woff2|ico)$/i,
-					loader: `file-loader?digest=hex&name=[path][name].[ext]`
+					loader: 'file-loader',
+					options: {
+						digest: 'hex',
+						name: '[path][name].[ext]'
+					}
 				},
 				{
 					test: /\.m\.css\.js$/,

src/base.test.config.ts

@@ -27,13 +27,13 @@ function webpackConfig(args: any): webpack.Configuration {
 	]);
 
 	if (module) {
-		module.rules = module.rules.map((rule) => {
+		module.rules = (module.rules || []).map((rule: webpack.RuleSetRule) => {
 			if (Array.isArray(rule.use)) {
-				rule.use = rule.use.map((loader) => {
+				rule.use = rule.use.map((loader: any) => {
 					if (typeof loader === 'string') {
 						return loader;
 					}
-					const { loader: loaderName } = loader as webpack.RuleSetLoader;
+					const { loader: loaderName } = loader;
 					if (loaderName === 'umd-compat-loader') {
 						return {
 							loader: loaderName,

src/dev.config.ts

@@ -15,8 +15,9 @@ import * as path from 'path';
 import webpack = require('webpack');
 import BuildTimeRender from '@dojo/webpack-contrib/build-time-render/BuildTimeRender';
 import ExternalLoaderPlugin from '@dojo/webpack-contrib/external-loader-plugin/ExternalLoaderPlugin';
-import * as CleanWebpackPlugin from 'clean-webpack-plugin';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import * as CopyWebpackPlugin from 'copy-webpack-plugin';
+import { RuleSetRule } from 'webpack';
 
 const WebpackPwaManifest = require('webpack-pwa-manifest');
 
@@ -44,12 +45,17 @@ function webpackConfig(args: any): webpack.Configuration {
 
 	config.plugins = [
 		...plugins!,
-		assetsDirExists && new CopyWebpackPlugin([{ from: assetsDir, to: path.join(outputPath, 'assets') }]),
+		assetsDirExists &&
+			new CopyWebpackPlugin({ patterns: [{ from: assetsDir, to: path.join(outputPath, 'assets') }] }),
 		new HtmlWebpackPlugin({
 			base,
 			inject: true,
 			chunks: [entryName],
-			meta: manifest ? { 'mobile-web-app-capable': 'yes' } : {},
+			meta: manifest
+				? {
+						'mobile-web-app-capable': 'yes'
+				  }
+				: {},
 			template: 'src/index.html',
 			cache: false
 		}),
@@ -91,17 +97,17 @@ window['${libraryName}'].base = '${base}'</script>`,
 </script>`,
 				type: 'append'
 			}),
-		new CleanWebpackPlugin(['dev', 'info'], { root: output!.path, verbose: false })
+		new CleanWebpackPlugin({ cleanAfterEveryBuildPatterns: ['dev', 'info'], verbose: false })
 	].filter((item) => item);
 
 	if (module) {
-		module.rules = module.rules.map((rule) => {
+		module.rules = module.rules.map((rule: RuleSetRule) => {
 			if (Array.isArray(rule.use)) {
-				rule.use = rule.use.map((loader) => {
+				rule.use = rule.use.map((loader: any) => {
 					if (typeof loader === 'string') {
 						return loader;
 					}
-					const { loader: loaderName, options } = loader as webpack.RuleSetLoader;
+					const { loader: loaderName, options } = loader;
 					if (loaderName === '@dojo/webpack-contrib/static-build-loader') {
 						if (typeof options === 'object') {
 							options.features = { ...(options.features || {}), 'dojo-debug': true };