CODEWITHSUNDEEP
javascriptvitebundler
Furman
Furman

Reputation: 2435

Vite custom plugin transformIndexHtml hook not working during build

I'm writing custom plugin in vite.js to transform my index.html file:

  return {
    name: 'html-build-plugin',
    apply: 'build',
    transformIndexHtml: {
      order: 'post',
      handler(htmlData, ctx) {
        const transformedHtml = htmlData.replace('<title>', '<title>aaa:');

        return transformedHtml;
      }
    }
  };
}

I'm using this plugin in my vite.config.ts file:

export default defineConfig(({ mode }) => {
  return {
    mode,
    build: {
      outDir: 'dist',
      sourcemap: mode === 'development' ? 'inline' : true,
      target: 'modules',
      cssCodeSplit: false,
      rollupOptions: {
        input: {
          app: path.resolve(__dirname, 'src', 'scripts', 'entry.ts'),
        },
        output: {
          format: 'systemjs',
          dir: path.resolve(__dirname, 'dist'),
          generatedCode: 'es2015',
          manualChunks(id: string): string {
            if (id.includes('node_modules')) {
              return 'vendor';
            }
          },
          chunkFileNames: '[name].[hash].js',
          entryFileNames: '[name].[hash].js',
          assetFileNames: 'assets/[name].[hash][extname]',
          plugins: [
            manifestJSON.default({
              fileName: 'manifest.json',
            }),
          ],
        },
        logLevel: 'debug',
      },
    },
    plugins: [HtmlBuildPlugin()],
  };
});

Plugin is working and hook is called only in dev mode (when I call npx vite dev). When I'm running build mode npx vite build (Vite does in fact copy my index.html from my public directory to dist directory) it does not. Docs states that it should work in both cases: The context exposes the ViteDevServer instance during dev, and exposes the Rollup output bundle during build. What am I doing wrong? I tried placing this plugin in rollup options, but it does not work either.

Upvotes: 2

Views: 2590

Answers (1)

Furman
Furman

Reputation: 2435

Just for record in case anyone would have similiar problem: In rollupOptions I had to add separate entrypoint for html file. It's weird and it generates additional empty javascript file, but it works.

rollupOptions: {
  input: {
    app: path.resolve(__dirname, 'src', 'scripts', 'entry.ts'),
    template: path.resolve(__dirname, 'index.html'),
  },

Upvotes: -2

Related Questions