A Information to Migrating from Webpack to Vite — SitePoint

0
3


On this article, we’ll have a look at the right way to improve a frontend net software from Webpack to Vite.

Vite is the most recent frontend improvement instrument to be having fun with an amazing development in reputation and adoption. Simply take a look at these downloads from npm traits within the picture under.

npm trends graph for Vite

Picture supply

This pattern is being pushed by a key idea on the coronary heart of Vite: developer expertise. Compared with Webpack, Vite can provide considerably quicker construct occasions and scorching reloading occasions throughout improvement. It does this by benefiting from trendy browser options corresponding to ES modules within the browser.

A Vite application loaded with script type module

Earlier than we dive into the method of migrating from Webpack to Vite, it’s value noting that the frontend improvement panorama is constantly evolving, and Vite isn’t the one instrument within the highlight. esbuild is one other extremely quick JavaScript bundler and minifier that’s catching the eye of net builders. And when you’re in search of a extra zero-config strategy, you may additionally wish to discover Parcel, which gives a seamless expertise for a lot of builders.

Desk of Contents
  1. Issues earlier than Migrating to Vite
  2. Step 1: Putting in Vite
  3. Step 2: Make bundle.json Adjustments
  4. Step 3: Out with webpack.config, in with vite.config
  5. Step 4: Plugins
  6. In style Webpack Plugins and their Vite Equivalents
  7. Conclusion

Issues earlier than Migrating to Vite

Whereas Vite introduces many thrilling new options into your workflow, as with every new know-how there are drawbacks to think about. When in comparison with such a mature instrument as Webpack, the first consideration would be the ecosystem of third-party plugins.

There are dozens of core/official Webpack plugins, and tons of (probably 1000’s) of community-contributed plugins on npm which were developed over the ten years that Webpack has been in use. Whereas plugin help for Vite is superb, it’s possible you’ll end up within the scenario the place the plugin you depend on in your venture doesn’t have a Vite equal, and this might turn out to be a blocker in your migration to Vite.

Step 1: Putting in Vite

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

npm create vite@newest

New Vite application console output

Then begin the event server like so:

npm run dev

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

Vite application running locally

Vite will create a listing containing the information pictured under.

Vite folder structure

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

Step 2: Make bundle.json Adjustments

To start utilizing Vite in your present Webpack venture, head over to the bundle.json of the Webpack venture you wish to migrate and set up Vite:

npm set up –save vite

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

npm set up –save @vitejs/plugin-react

You can even 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 improvement script to strive it out!

npm run dev

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

Except you’re extraordinarily fortunate, you’ll almost certainly want to incorporate some extra configuration. Vite makes use of the vite.config.js file for configuration, which is basically analogous to your present webpack.config.js file.

You could find the total documentation for this Vite config on vitejs.dev, however a easy Vite configuration for a React app would possibly appear like this:

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

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

Step 4: Plugins

Beneath the hood, Vite makes use of Rollup as its construct instrument, and you’ll add any Rollup plugins to Vite by putting in them with npm:

npm set up –save @rollup/plugin-image

`

Additionally add them into the plugins array your vite.config.js file:


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 have a look at some standard Webpack plugins and their Vite equivalents.

HtmlWebpackPlugin -> vite-plugin-html

HtmlWebpackPlugin simplifies the creation of HTML information to serve your Webpack bundles. In case you’re utilizing HtmlWebpackPlugin in your venture, Vite has the vite-plugin-html plugin, which gives comparable capabilities. You’ll be able to 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 information. It creates a CSS file for every JavaScript file that comprises CSS. It’s sometimes utilized in manufacturing environments to facilitate extra environment friendly loading of CSS. The advantage of that is twofold. Firstly, it permits CSS to be cached individually by the browser. Secondly, it prevents a flash of unstyled content material, as CSS is now not embedded within the JavaScript information and might thus be loaded in parallel with JavaScript, leading to quicker web page load occasions.

In Vite, you should utilize vite-plugin-purgecss:

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

Use the plugin in your vite.config.js file like so:

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

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

CopyWebpackPlugin -> vite-plugin-static-copy

CopyWebpackPlugin is used to repeat particular person information or total directories to the construct listing. Vite has the same 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 switch tokens within the supply code with their assigned values at compile time. This lets you create international constants that may be configured at compile time. In Vite, you’ll be able to obtain the identical impact utilizing the outline choice in vite.config.js, so it’s possible you’ll not want a plugin:

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

Conclusion

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

In case your venture is a big, complicated one with an intricate construct course of, Webpack’s feature-rich and versatile configuration could also be nonetheless your best option.

In case you’re migrating a smaller or average venture, Vite does affords some compelling advantages. Its pace, each when it comes to the server start-up and scorching module substitute, can considerably enhance improvement productiveness. The simplicity of its configuration will also be a welcome respite, and its being designed with native ES Modules and trendy framework compatibility in thoughts units it up properly for the long run.

Transitioning from Webpack to Vite does require cautious planning and testing, significantly when contemplating plugin replacements or refactoring. However the rewards of this transfer could be substantial. Vite affords a quicker, leaner improvement surroundings that may in the end result in a smoother and extra environment friendly improvement workflow.

It’s at all times helpful to control the evolving panorama of instruments. As you proceed your journey, take into account additionally exploring different trendy instruments like esbuild and Parcel to seek out the most effective match in your venture wants.

Bear in mind, the instrument isn’t what issues most, however how you employ it to attain your aims. Webpack, Vite, esbuild, and Parcel are all wonderful instruments designed that will help you create top-notch net tasks, and the most effective one to make use of relies on your particular wants and constraints.

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



LEAVE A REPLY

Please enter your comment!
Please enter your name here