webpack 5 updates

Author: maier49

package.json

@@ -156,11 +156,11 @@
     "tsconfig-paths-webpack-plugin": "3.2.0",
     "typed-css-modules": "0.3.1",
     "umd-compat-loader": "2.1.1",
-    "webpack": "5.0.0-beta.29",
+    "webpack": "5.0.0-beta.30",
     "webpack-hot-middleware": "2.24.3",
     "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

@@ -548,6 +548,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: {

src/dev.config.ts

@@ -51,7 +51,11 @@ function webpackConfig(args: any): webpack.Configuration {
 			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
 		}),

src/dist.config.ts

@@ -101,7 +101,11 @@ function webpackConfig(args: any): webpack.Configuration {
 			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
 		}),
@@ -167,7 +171,7 @@ function webpackConfig(args: any): webpack.Configuration {
 	config.plugins = config.plugins.map((plugin: any) => {
 		if (plugin instanceof MiniCssExtractPlugin) {
 			return new MiniCssExtractPlugin({
-				filename: args.omitHash ? '[name].bundle.css' : '[name].[contenthash].bundle.css'
+				filename: args.omitHash ? '[name].bundle.css' : '[name].bundle.css'
 			});
 		}
 		return plugin;
@@ -215,8 +219,8 @@ function webpackConfig(args: any): webpack.Configuration {
 	config.output = {
 		...output,
 		path: outputPath,
-		chunkFilename: args.omitHash ? '[name].bundle.js' : '[name].[chunkhash].bundle.js',
-		filename: args.omitHash ? '[name].bundle.js' : '[name].[chunkhash].bundle.js'
+		chunkFilename: args.omitHash ? '[name].bundle.js' : '[name].bundle.js',
+		filename: args.omitHash ? '[name].bundle.js' : '[name].bundle.js'
 	};
 
 	return config;

src/schema.json

@@ -377,10 +377,10 @@
 									"strategy": {
 										"type": "string",
 										"enum": [
-											"networkFirst",
-											"cacheFirst",
-											"networkOnly",
-											"staleWhileRevalidate"
+											"NetworkFirst",
+											"CacheFirst",
+											"NetworkOnly",
+											"StaleWhileRevalidate"
 										]
 									},
 									"expiration": {

test-app/.dojorc-dev-pwa

@@ -35,8 +35,8 @@
 				"clientsClaim": true,
 				"excludeBundles": [ "src/LazyWidget" ],
 				"routes": [
-					{ "urlPattern": "\\.(jpg|png|gif|svg)$", "strategy": "cacheFirst", "expiration": { "maxEntries": 25 } },
-					{ "urlPattern": "/api", "strategy": "networkFirst" }
+					{ "urlPattern": "\\.(jpg|png|gif|svg)$", "strategy": "CacheFirst", "expiration": { "maxEntries": 25 } },
+					{ "urlPattern": "/api", "strategy": "NetworkFirst" }
 				]
 			}
 		},

test-app/.dojorc-dev-pwa-evergreen

@@ -34,8 +34,8 @@
 				"clientsClaim": true,
 				"excludeBundles": [ "src/LazyWidget" ],
 				"routes": [
-					{ "urlPattern": "\\.(jpg|png|gif|svg)$", "strategy": "cacheFirst", "expiration": { "maxEntries": 25 } },
-					{ "urlPattern": "/api", "strategy": "networkFirst" }
+					{ "urlPattern": "\\.(jpg|png|gif|svg)$", "strategy": "CacheFirst", "expiration": { "maxEntries": 25 } },
+					{ "urlPattern": "/api", "strategy": "NetworkFirst" }
 				]
 			}
 		},

test-app/.dojorc-dist-pwa

@@ -34,8 +34,8 @@
 				"clientsClaim": true,
 				"excludeBundles": [ "src/LazyWidget" ],
 				"routes": [
-					{ "urlPattern": "\\.(jpg|png|gif|svg)$", "strategy": "cacheFirst", "expiration": { "maxEntries": 25 } },
-					{ "urlPattern": "/api", "strategy": "networkFirst" }
+					{ "urlPattern": "\\.(jpg|png|gif|svg)$", "strategy": "CacheFirst", "expiration": { "maxEntries": 25 } },
+					{ "urlPattern": "/api", "strategy": "NetworkFirst" }
 				]
 			}
 		},

test-app/.dojorc-dist-pwa-evergreen

@@ -33,8 +33,8 @@
 				"clientsClaim": true,
 				"excludeBundles": [ "src/LazyWidget" ],
 				"routes": [
-					{ "urlPattern": "\\.(jpg|png|gif|svg)$", "strategy": "cacheFirst", "expiration": { "maxEntries": 25 } },
-					{ "urlPattern": "/api", "strategy": "networkFirst" }
+					{ "urlPattern": "\\.(jpg|png|gif|svg)$", "strategy": "CacheFirst", "expiration": { "maxEntries": 25 } },
+					{ "urlPattern": "/api", "strategy": "NetworkFirst" }
 				]
 			}
 		},

tests/integration/build.spec.ts

@@ -1,11 +1,6 @@
 describe('build', () => {
 	function testUrl(dir: string, isDist: boolean, isPwa: boolean) {
 		cy.visit(`/test-app/output/${dir}/`);
-		cy.get('#div').should(
-			'contain',
-			`Built with Build Time Render: true
-Currently Rendered by BTR: false`
-		);
 		cy.get('#app-root').should('contain', 'Lazy Widget using dojorc configuration');
 		cy.get('#div').should('have.css', 'background-color', 'rgba(0, 0, 0, 0.5)');
 		cy.get('#vars').should('have.css', 'outline-color', 'rgba(255, 0, 0, 0.5)');
@@ -18,6 +13,11 @@ Currently Rendered by BTR: false`
 		cy.get('#div[has-prod=prod]').should(isDist ? 'exist' : 'not.exist');
 		cy.get('#div[dojo-debug=true]').should(isDist ? 'not.exist' : 'exist');
 		cy.get('#div[has-ci=ci]').should(isDist ? 'not.exist' : 'exist');
+		cy.get('#div').should(
+			'contain',
+			`Built with Build Time Render: true
+Currently Rendered by BTR: false`
+		);
 
 		cy.get('meta[name="mobile-web-app-capable"]').should(isPwa ? 'exist' : 'not.exist');
 		cy.get('meta[name="apple-mobile-web-app-capable"]').should(isPwa ? 'exist' : 'not.exist');
@@ -54,7 +54,7 @@ Currently Rendered by BTR: false`
 		it('dev-pwa', () => {
 			testUrl('dev-pwa', false, true);
 		});
-		it('dev-app', () => {
+		it('dev-pwa-evergreen', () => {
 			testUrl('dev-pwa-evergreen', false, true);
 		});
 	});