Migrating a Webpack Project to Vite: A Golden Circle Approach

In modern frontend development, choosing the right build tool is crucial; while Webpack has long been dominant, Vite has emerged as a faster, more modern alternative. This guide combines Simon Sinek's Golden Circle model (Why, How, What) with a practical migration from Webpack to Vite.

Why migrate? The existing Webpack system suffers from complex dependencies (over 7,000 modules), long build times (≈120 s on macOS, even slower on Windows), slow hot‑module replacement (≈2 s), and large bundle sizes that cannot be further optimized through configuration alone.

How Vite improves the experience Vite leverages native ES modules in the browser, eliminating the need to bundle the entire project during development. This dramatically reduces startup time and hot‑update latency, especially for large codebases, and provides modern features such as built‑in TypeScript support and Rollup‑based production builds.

What the migration entails

1. Initialize Vite dependencies

npm i [email protected] [email protected] -D

2. Install Vue‑2 compatible plugins

npm i [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

3. Adjust project structure – copy public/index.html to the project root, update template variables, and define VITE_APP_TITLE in a .env file.

4. Configure Vite (file vite.config.js ) with plugins, alias, server options, and CSS pre‑processor settings. Example configuration:

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import envCompatible from 'vite-plugin-env-compatible'
import { viteCommonjs } from 'vite-plugin-commonjs'
import viteRequireContext from 'vite-plugin-require-context'
import dynamicImport from 'vite-plugin-dynamic-import'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

function vitePluginTransDeep() {
  return {
    name: 'vite-plugin-transform-scss',
    enforce: 'pre',
    transform(src, id) {
      if (/\.(js|vue)(\?)*/.test(id) && id.includes('lang.scss') && !id.includes('node_modules')) {
        return { code: src.replace(/(\/deep\/|>>>)/gi, '::v-deep') }
      }
    }
  }
}

export default defineConfig({
  plugins: [
    createVuePlugin({ jsx: true }),
    dynamicImport(),
    viteCommonjs(),
    viteRequireContext(),
    envCompatible(),
    nodePolyfills(),
    vitePluginTransDeep()
  ],
  envPrefix: ['VUE_APP_'],
  base: '/dd/',
  server: { host: 'me.jr.jd.com' },
  resolve: { extensions: ['.js', '.vue', '.json'], alias: {} },
  css: { preprocessorOptions: { scss: { additionalData: `@import './src/variables/index.scss';` } } }
})

5. Handle CSS modules – rename module files to *.module.scss and ensure they are processed correctly.

6. Replace deep selectors – convert deprecated /deep/ syntax to ::v-deep using the custom plugin above.

7. Configure global SCSS variables via css.preprocessorOptions in the Vite config.

Migration results After switching to Vite, build time dropped from 120 seconds to about 1.5 seconds (a 98 % reduction), and hot‑module replacement became near‑instant. The project also benefits from a cleaner configuration and modern tooling.

By applying the Golden Circle framework—clarifying the motivation (Why), the method (How), and the concrete actions (What)—the migration not only solved performance bottlenecks but also provided a structured way to think about engineering decisions.

Overall, Vite offers a faster development experience, modern features, and simpler configuration, making it a compelling choice for large frontend codebases seeking to improve efficiency and maintainability.