CODEWITHSUNDEEP
reactjswebpackpluginsfrontendvite
Christian Gama
Christian Gama

Reputation: 157

How to serve different index.html based on environment using Vite?

In webpack I used HtmlWebpackPlugin, which I could tell which HTML template I'd like to use. I wonder how can I achieve this same result using Vite.

The objective is to use React CDN in production (build), but I don't want to use it in development.

I had something like this in my webpack config:

const { merge } = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/template.dev.html'
    })
  ]
})

Upvotes: 5

Views: 8018

Answers (2)

gedouuu
gedouuu

Reputation: 1

If your project does not use the default index.html, you can use plugin vite-plugin-generate-html which allows you to define separate files for generated CSS & JS chunks and then include the files as you wish in the project.

Upvotes: 0

Michal Szajter
Michal Szajter

Reputation: 84

You can use vite-plugin-html.

Based on the docs it supports to set the template file same way as HtmlWebpackPlugin.

Changing the template based on the mode, you'd need to use conditional config in your "vite.config" file.

Edit:

As this plugin also allows to expose variables into the template, you might even not use two separate templates if the only difference is the <script src="">.

You might use something like: <script src="<%- REACT_SCRIPT_SOURCE %>">

Upvotes: 2

Related Questions