[Refactor] vite.config.ts

utils/plugins/add-hmr.ts

@@ -2,21 +2,20 @@ import * as path from 'path';
 import { readFileSync } from 'fs';
 import type { PluginOption } from 'vite';
 
-const isDev = process.env.__DEV__ === 'true';
-
 const DUMMY_CODE = `export default function(){};`;
 
 function getInjectionCode(fileName: string): string {
   return readFileSync(path.resolve(__dirname, '..', 'reload', 'injections', fileName), { encoding: 'utf8' });
 }
 
 type Config = {
-  background?: boolean;
-  view?: boolean;
+  isDev: boolean;
+  background: boolean;
+  view: boolean;
 };
 
-export default function addHmr(config?: Config): PluginOption {
-  const { background = false, view = true } = config || {};
+export default function addHmr(config: Config): PluginOption {
+  const { background, view, isDev } = config;
   const idInBackgroundScript = 'virtual:reload-on-update-in-background-script';
   const idInView = 'virtual:reload-on-update-in-view';
 

utils/vite.ts

@@ -0,0 +1,31 @@
+import { type PluginOption } from 'vite';
+import makeManifest from './plugins/make-manifest';
+import customDynamicImport from './plugins/custom-dynamic-import';
+import addHmr from './plugins/add-hmr';
+import watchRebuild from './plugins/watch-rebuild';
+import inlineVitePreloadScript from './plugins/inline-vite-preload-script';
+
+export const getPlugins = (isDev: boolean): PluginOption[] => [
+  makeManifest({ getCacheInvalidationKey }),
+  customDynamicImport(),
+  // You can toggle enable HMR in background script or view
+  addHmr({ background: true, view: true, isDev }),
+  isDev && watchRebuild({ afterWriteBundle: regenerateCacheInvalidationKey }),
+  // For fix issue#177 (https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/177)
+  inlineVitePreloadScript(),
+];
+
+const cacheInvalidationKeyRef = { current: generateKey() };
+
+export function getCacheInvalidationKey() {
+  return cacheInvalidationKeyRef.current;
+}
+
+function regenerateCacheInvalidationKey() {
+  cacheInvalidationKeyRef.current = generateKey();
+  return cacheInvalidationKeyRef;
+}
+
+function generateKey(): string {
+  return `${Date.now().toFixed()}`;
+}

vite.config.ts

@@ -2,48 +2,28 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path, { resolve } from 'path';
-import makeManifest from './utils/plugins/make-manifest';
-import customDynamicImport from './utils/plugins/custom-dynamic-import';
-import addHmr from './utils/plugins/add-hmr';
-import watchRebuild from './utils/plugins/watch-rebuild';
-import inlineVitePreloadScript from './utils/plugins/inline-vite-preload-script';
+import { getCacheInvalidationKey, getPlugins } from './utils/vite';
 
 const rootDir = resolve(__dirname);
 const srcDir = resolve(rootDir, 'src');
 const pagesDir = resolve(srcDir, 'pages');
-const assetsDir = resolve(srcDir, 'assets');
-const outDir = resolve(rootDir, 'dist');
-const publicDir = resolve(rootDir, 'public');
 
 const isDev = process.env.__DEV__ === 'true';
 const isProduction = !isDev;
 
-// ENABLE HMR IN BACKGROUND SCRIPT
-const enableHmrInBackgroundScript = true;
-const cacheInvalidationKeyRef = { current: generateKey() };
-
 export default defineConfig({
   resolve: {
     alias: {
       '@root': rootDir,
       '@src': srcDir,
-      '@assets': assetsDir,
+      '@assets': resolve(srcDir, 'assets'),
       '@pages': pagesDir,
     },
   },
-  plugins: [
-    makeManifest({
-      getCacheInvalidationKey,
-    }),
-    react(),
-    customDynamicImport(),
-    addHmr({ background: enableHmrInBackgroundScript, view: true }),
-    isDev && watchRebuild({ afterWriteBundle: regenerateCacheInvalidationKey }),
-    inlineVitePreloadScript(),
-  ],
-  publicDir,
+  plugins: [...getPlugins(isDev), react()],
+  publicDir: resolve(rootDir, 'public'),
   build: {
-    outDir,
+    outDir: resolve(rootDir, 'dist'),
     /** Can slow down build speed. */
     // sourcemap: isDev,
     minify: isProduction,
@@ -81,15 +61,3 @@ export default defineConfig({
     setupFiles: './test-utils/vitest.setup.js',
   },
 });
-
-function getCacheInvalidationKey() {
-  return cacheInvalidationKeyRef.current;
-}
-function regenerateCacheInvalidationKey() {
-  cacheInvalidationKeyRef.current = generateKey();
-  return cacheInvalidationKeyRef;
-}
-
-function generateKey(): string {
-  return `${Date.now().toFixed()}`;
-}