fix(cli): improve plugin builds

cli/src/lib/plugin/webpack.config.js

@@ -276,23 +276,34 @@ module.exports = ({ env: webpackEnv, config, paths }) => {
                                 },
                             }),
                         },
+                        // 'asset/resource' fixes fonts, but 'file-loader' breaks css modules
+                        // when used for all asset types. So use each for respective files
+                        {
+                            test: /\.(woff|woff2|eot|ttf|otf)$/i,
+                            type: 'asset/resource',
+                            generator: {
+                                filename: 'static/media/[name].[hash][ext]',
+                            },
+                        },
                         // "file" loader makes sure those assets get served by WebpackDevServer.
                         // When you `import` an asset, you get its (virtual) filename.
                         // In production, they would get copied to the `build` folder.
                         // This loader doesn't use a "test" so it will catch all modules
                         // that fall through the other loaders.
                         {
+                            loader: require.resolve('file-loader'),
                             // Exclude `js` files to keep "css" loader working as it injects
                             // its runtime that would otherwise be processed through "file" loader.
                             // Also exclude `html` and `json` extensions so they get processed
                             // by webpacks internal loaders.
                             exclude: [
-                                /^$/,
                                 /\.(js|mjs|jsx|ts|tsx)$/,
                                 /\.html$/,
                                 /\.json$/,
                             ],
-                            type: 'asset/resource',
+                            options: {
+                                name: 'static/media/[name].[hash:8].[ext]',
+                            },
                         },
                     ],
                 },

pwa/src/lib/registration.js

@@ -133,7 +133,7 @@ export function register(config) {
         window.addEventListener('load', () => {
             // By compiling the dev SW to the 'public' dir, this URL works in
             // both dev and production modes
-            const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
+            const swUrl = new URL('service-worker.js', publicUrl)
 
             if (isLocalhost) {
                 // This is running on localhost. Let's check if a service worker still exists or not.

pwa/src/service-worker/service-worker.js

@@ -154,8 +154,12 @@ export function setUpServiceWorker() {
     )
 
     // Network-first caching by default
+    // (and for static assets while in development)
+    // * NOTE: there may be lazy-loading errors while offline in dev mode
     registerRoute(
-        ({ url }) => urlMeetsAppShellCachingCriteria(url),
+        ({ url }) =>
+            urlMeetsAppShellCachingCriteria(url) ||
+            (!PRODUCTION_ENV && fileExtensionRegexp.test(url.pathname)),
         new NetworkFirst({ cacheName: 'app-shell' })
     )