Home Programming A Information to Migrating from Webpack to Vite — SitePoint

A Information to Migrating from Webpack to Vite — SitePoint

0
A Information to Migrating from Webpack to Vite — SitePoint

[ad_1]

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

Vite is the most recent frontend growth software to be having fun with an incredible development in recognition and adoption. Simply try these downloads from npm tendencies within the picture beneath.

npm trends graph for Vite

Picture supply

This development is being pushed by a key idea on the coronary heart of Vite: developer expertise. In comparison with Webpack, Vite can supply considerably sooner construct occasions and sizzling reloading occasions throughout growth. It does this by profiting from fashionable browser options comparable 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 price noting that the frontend growth panorama is repeatedly evolving, and Vite isn’t the one software 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 searching for a extra zero-config strategy, you may additionally need to discover Parcel, which offers 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. Well-liked 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 all new expertise there are drawbacks to contemplate. When in comparison with such a mature software as Webpack, the first consideration would be the ecosystem of third-party plugins.

There are dozens of core/official Webpack plugins, and tons of (presumably hundreds) 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 state of affairs the place the plugin you depend on in your mission 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 mission is to create a brand new Vite utility and discover the software you’re migrating to. You may 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 beneath.

Vite folder structure

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

Step 2: Make bundle.json Adjustments

To start utilizing Vite in your current Webpack mission, head over to the bundle.json of the Webpack mission you need to migrate and set up Vite:

npm set up –save vite

Relying in your frontend framework, you may additionally need to set up the framework-specific plugin:

npm set up –save @vitejs/plugin-react

You can too 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 growth 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 more than likely want to incorporate some further configuration. Vite makes use of the vite.config.js file for configuration, which is essentially analogous to your current 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 may appear to be 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 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(),
  ],
})

Well-liked Webpack Plugins and their Vite Equivalents

Let’s subsequent have a look at some common Webpack plugins and their Vite equivalents.

HtmlWebpackPlugin -> vite-plugin-html

HtmlWebpackPlugin simplifies the creation of HTML information to serve your Webpack bundles. If you happen to’re utilizing HtmlWebpackPlugin in your mission, Vite has the vite-plugin-html plugin, which offers related capabilities. You may 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 accommodates CSS. It’s sometimes utilized in manufacturing environments to facilitate extra environment friendly loading of CSS. The advantage of that is twofold. Firstly, it allows CSS to be cached individually by the browser. Secondly, it prevents a flash of unstyled content material, as CSS is not embedded within the JavaScript information and may thus be loaded in parallel with JavaScript, leading to sooner web page load occasions.

In Vite, you need to use 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 complete directories to the construct listing. Vite has the same plugin referred to 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 utility to Vite, together with a few of the hottest Webpack plugins.

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

If you happen to’re migrating a smaller or reasonable mission, Vite does gives some compelling advantages. Its velocity, each when it comes to the server start-up and sizzling module substitute, can considerably increase growth productiveness. The simplicity of its configuration may also be a welcome respite, and its being designed with native ES Modules and fashionable framework compatibility in thoughts units it up properly for the long run.

Transitioning from Webpack to Vite does require cautious planning and testing, notably when contemplating plugin replacements or refactoring. However the rewards of this transfer will be substantial. Vite gives a sooner, leaner growth surroundings that may finally result in a smoother and extra environment friendly growth workflow.

It’s all the time helpful to keep watch over the evolving panorama of instruments. As you proceed your journey, take into account additionally exploring different fashionable instruments like esbuild and Parcel to search out the perfect match in your mission wants.

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

If you wish to discover Vite additional, try our article the place we discover Vite via its supply code.

FAQs About Vite

What’s Vite?

Vite is a construct software and growth server for contemporary net functions. It’s designed to be quick and light-weight, making it a superb selection for creating JavaScript and TypeScript-based tasks.

How is Vite completely different from different construct instruments like Webpack or Parcel?

Vite differs from conventional construct instruments like Webpack and Parcel in its use of native ES modules for growth and its capability to offer near-instantaneous growth server begin occasions. It leverages the browser’s native module system for a sooner and extra environment friendly growth expertise.

What varieties of tasks can I construct with Vite?

Vite is flexible and can be utilized for numerous net growth tasks, together with single-page functions (SPAs), static web sites, and progressive net apps (PWAs). It’s particularly well-suited for Vue.js and React functions.

Does Vite help different languages like TypeScript and CSS preprocessors?

Sure, Vite helps JavaScript, TypeScript, and CSS out of the field. It additionally has built-in help for numerous CSS preprocessors like Sass, Much less, and Stylus.

Can I exploit Vite with common JavaScript frameworks like Vue.js and React?

Sure, Vite has built-in help for Vue.js and React, making it an acceptable selection for creating functions with these frameworks.

Can I exploit Vite for manufacturing builds?

Sure, Vite is appropriate for each growth and manufacturing builds. It could actually generate optimized manufacturing builds with minified and bundled property.

[ad_2]

Supply hyperlink

LEAVE A REPLY

Please enter your comment!
Please enter your name here