On this article, we’ll take a look at improve a frontend internet software from Webpack to Vite.

Vite is the newest frontend construction software to be playing an amazing expansion in recognition and adoption. Simply take a look at those downloads from npm developments within the picture underneath.

Symbol supply

This development is being pushed by way of a key idea on the middle of Vite: developer enjoy. In comparison with Webpack, Vite can be offering considerably quicker construct instances and scorching reloading instances all the way through construction. It does this by way of making the most of fashionable browser options similar to ES modules within the browser.

Prior to we dive into the method of migrating from Webpack to Vite, it’s price noting that the frontend construction panorama is incessantly evolving, and Vite isn’t the one software within the highlight. esbuild is any other extremely speedy JavaScript bundler and minifier that’s catching the eye of internet builders. And for those who’re searching for a extra zero-config way, you may also need to discover Parcel, which supplies a unbroken enjoy for lots of builders.

Issues ahead of Migrating to Vite

Whilst Vite introduces many thrilling new options into your workflow, as with every new era there are drawbacks to believe. When in comparison to this type of mature software as Webpack, the principle attention would be the ecosystem of third-party plugins.

There are dozens of core/legitimate Webpack plugins, and loads (in all probability hundreds) of community-contributed plugins on npm which were advanced over the 10 years that Webpack has been in use. Whilst plugin improve for Vite is superb, chances are you’ll to find your self within the state of affairs the place the plugin you depend on in your challenge doesn’t have a Vite identical, and this is able to develop into a blocker in your migration to Vite.

Step 1: Putting in Vite

Step one emigrate your challenge is to create a brand new Vite software and discover the software you’re migrating to. You’ll boilerplate a brand new Vite app with the next:

npm create vite@newest

Then birth the advance server like so:

npm run dev

Now, navigate to the displayed localhost URL on your browser.

Vite will create a listing containing the recordsdata pictured underneath.

Many of those will probably be acquainted to you and will probably be like-for-like replacements on your personal software.

Step 2: Make bundle.json Adjustments

To start the use of Vite to your current Webpack challenge, head over to the bundle.json of the Webpack challenge you need emigrate and set up Vite:

npm set up –save vite

Relying to your frontend framework, you might also need to set up the framework-specific plugin:

npm set up –save @vitejs/plugin-react

You’ll additionally replace any construct scripts it’s important to use Vite as a substitute of Webpack:

–  "construct": "webpack --mode manufacturing",
–  "dev": "webpack serve",
++   "construct": "vite construct",
++  "dev": "vite serve",

On the similar time, uninstall Webpack:

npm uninstall –save webpack webpack-cli wepack-dev-server

Now run your construction script to take a look at it out!

npm run dev

Step 3: Out with webpack.config, in with vite.config

Until you’re extraordinarily fortunate, you’ll perhaps wish to come with some further configuration. Vite makes use of the vite.config.js record for configuration, which is in large part analogous in your current webpack.config.js record.

You’ll to find the overall documentation for this Vite config on vitejs.dev, however a easy Vite configuration for a React app may seem like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  },
})

Step 4: Plugins

Below the hood, Vite makes use of Rollup as its construct software, and you’ll upload any Rollup plugins to Vite by way of putting in them with npm:

npm set up –save @rollup/plugin-image

`

Additionally upload them into the plugins array your vite.config.js record:

import picture from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
      image(),
  ],
})

In style Webpack Plugins and their Vite Equivalents

Let’s subsequent take a look at some in style Webpack plugins and their Vite equivalents.

HtmlWebpackPlugin -> vite-plugin-html

HtmlWebpackPlugin simplifies the advent of HTML recordsdata to serve your Webpack bundles. Should you’re the use of HtmlWebpackPlugin on your challenge, Vite has the vite-plugin-html plugin, which supplies an identical functions. You’ll set up it like so:

npm set up --save-dev vite-plugin-html

And import into your vite.config.js like so:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    react(),
    createHtmlPlugin({
      entry: 'src/main.js',
      template: 'public/index.html',
      inject: {
        data: {
          title: 'index',
          injectScript: `<script src="https://www.sitepoint.com/webpack-vite-migration/./inject.js"></script>`,
        },
    })
  ]
})

MiniCssExtractPlugin is a plugin for Webpack that extracts CSS into separate recordsdata. It creates a CSS record for each and every JavaScript record that accommodates CSS. It’s usually utilized in manufacturing environments to facilitate extra environment friendly loading of CSS. The good thing about that is twofold. Initially, it permits CSS to be cached one after the other by way of the browser. Secondly, it prevents a flash of unstyled content material, as CSS is not embedded within the JavaScript recordsdata and will thus be loaded in parallel with JavaScript, leading to quicker web page load instances.

In Vite, you’ll use vite-plugin-purgecss:

npm set up --save-dev vite-plugin-html-purgecss

Use the plugin on your vite.config.js record like so:

import htmlPurge from 'vite-plugin-html-purgecss'

export default {
    plugins: [
        htmlPurge(),
    ]
}

CopyWebpackPlugin -> vite-plugin-static-copy

CopyWebpackPlugin is used to duplicate particular person recordsdata or whole directories to the construct listing. Vite has a an identical plugin known as vite-plugin-static-copy:

npm set up --save-dev vite-plugin-static-copy

Put the next code into vite.config.js:

import { viteStaticCopy } from 'vite-plugin-static-copy'

export default {
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: 'bin/example.wasm',
          dest: 'wasm-files'
        }
      ]
    })
  ]
}

DefinePlugin -> outline()

In Webpack, the DefinePlugin is used to interchange tokens within the supply code with their assigned values at assemble time. This permits you to create international constants that may be configured at assemble time. In Vite, you’ll succeed in the similar impact the use of the outline choice in vite.config.js, so that you would possibly not want a plugin:

export default defineConfig({
  outline: {
    'procedure.env.NODE_ENV': JSON.stringify('manufacturing'),
  },
})

Conclusion

This has been a easy information to migrating a frontend Webpack software to Vite, together with one of the most hottest Webpack plugins.

In case your challenge is a huge, complicated one with an intricate construct procedure, Webpack’s feature-rich and versatile configuration is also nonetheless your best option.

Should you’re migrating a smaller or average challenge, Vite does gives some compelling advantages. Its velocity, each with regards to the server start-up and scorching module substitute, can considerably spice up construction productiveness. The simplicity of its configuration will also be a welcome respite, and its being designed with local ES Modules and fashionable framework compatibility in thoughts units it up properly for the long run.

Transitioning from Webpack to Vite does require cautious making plans and trying out, in particular when bearing in mind plugin replacements or refactoring. However the rewards of this transfer may also be considerable. Vite gives a quicker, leaner construction setting that may in the long run result in a smoother and extra environment friendly construction workflow.

It’s all the time recommended to regulate the evolving panorama of equipment. As you proceed your adventure, believe additionally exploring different fashionable equipment like esbuild and Parcel to search out the most efficient have compatibility in your challenge wishes.

Take into accout, the software isn’t what issues maximum, however how you employ it to succeed in your targets. Webpack, Vite, esbuild, and Parcel are all superb equipment designed that will help you create top-notch internet tasks, and the most efficient one to make use of relies on your particular wishes and constraints.

If you wish to discover Vite additional, take a look at our article the place we discover Vite thru its supply code.