fix(cli): improve plugin builds (#749)

* fix(pwa): registration URL on development

* fix(pwa): cache static assets network-first  in dev env

* fix(plugin): asset loader for fonts; file loader for others

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' })
  )