➤ How Does the Plugin Work?

For example, after PUG files have been converted to HTML by other plugins, vite-plugin-replace-paths finds and updates all resource paths during the build process, ensuring the application functions correctly.

Before Build:

<img src="/src/assets/images/jpg/bg_1280w.jpg" alt="Background">

After Build:

<img src="/dist/assets/bg_1280w-B89I5yDh.jpg" alt="Background">

➤ Install

$ yarn add vite-plugin-replace-paths

➤ Usage

import { replacePathsPlugin } from 'vite-plugin-replace-paths';

export default defineConfig({
  plugins: [
    replacePathsPlugin({
      verbose: true,
    }),
  ],
});

This snippet ensures that all image files are preloaded during development by utilizing import.meta.glob with the eager: true option. You can customize the pattern in import.meta.glob to match the specific directory and file types relevant to your project. Note that this snippet is executed only in development mode.

// main.ts
if (import.meta.env.DEV) {
  const images = import.meta.glob('./assets/images/**/*.{jpg,webp,avif,svg,png}', {
    eager: true,
    query: '?url',
    import: 'default',
  }) as Record<string, string>;

  for (const [path, url] of Object.entries(images)) {
    void path;
    void url;
  }
}

➤ Options

| Option | Type | Default | Description | |:-----------:|:----------:|:------------:|:--------------------------------------------------------------------------------------------------------------------------------------------------| | verbose | boolean | false | Enables verbose logging to provide details about which files are being processed and replaced. |

➤ License

vite-plugin-replace-paths is released under MIT license