如何從Webpack遷移到Vite

本文將介紹如何將前端web應用程式從 Webpack 升級到 Vite。

Vite 是最新的前端開發工具，其受歡迎程度和採用率都在大幅增長。可以檢視下圖中來自 npm trends 的下載。

推動這一趨勢的是 Vite 核心的一個關鍵概念：開發人員體驗。與 Webpack 相比，Vite 在開發過程中能顯著縮短構建時間和熱過載時間。它通過利用瀏覽器中的 ES 模組等現代瀏覽器功能來實現這一目標。

在我們深入探討從 Webpack 遷移到 Vite 的過程之前，值得注意的是，前端開發領域正在不斷髮展，Vite 並不是唯一受到關注的工具。esbuild 是另一款速度驚人的 JavaScript 捆綁程式和精簡程式，正吸引著網路開發人員的目光。如果你正在尋找一種零設定的方法，你可能還想了解一下 Parcel，它為許多開發人員提供了無縫體驗。

注意事項

雖然 Vite 為你的工作流引入了許多令人興奮的新特性，但與任何新技術一樣，也有一些缺點需要考慮。與 Webpack 這樣成熟的工具相比，首先考慮的是第三方外掛的生態系統。

在 Webpack 使用的十年間，npm 上有數十個核心/官方 Webpack 外掛和數百（可能數千）個社群貢獻的外掛。雖然 Vite 的外掛支援非常好，但你可能會發現，專案所依賴的外掛並沒有與 Vite 對應的外掛，這可能會成為你遷移到 Vite 的障礙。

安裝Vite

遷移專案的第一步是建立一個新的 Vite 應用程式，並探索要遷移到的工具。你可以用以下方法為新的 Vite 應用程式製作模板：

npm create vite@latest

然後開啟開發服務：

npm run dev

現在，在瀏覽器中導航到顯示的 localhost URL。

Vite 將建立一個包含下圖所示的檔案目錄。

其中許多內容你都不會陌生，可以在你的應用程式中進行類似替換。

更改package.json

要開始在現有 Webpack 專案中使用 Vite，請前往要遷移的 Webpack 專案的 package.json，然後安裝 Vite：

npm install –save vite

根據你使用的前端框架，你可能還需要安裝特定的框架外掛：

npm install –save @vitejs/plugin-react

你還可以更新任何構建指令碼，使用 Vite 代替 Webpack：

–  "build": "webpack --mode production",
–  "dev": "webpack serve",
++   "build": "vite build",
++  "dev": "vite serve",

同時，解除安裝Webpack：

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

現在再來試試新的開發指令碼吧！

npm run dev

vite.config

除非你非常幸運，否則很可能需要新增一些額外的設定。Vite 使用 vite.config.js 檔案進行設定，這在很大程度上類似於現有的 webpack.config.js 檔案。

你可以在 vitejs.dev 上找到 Vite 設定的完整檔案，但 React 應用程式的簡單 Vite 設定可能如下所示：

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

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

外掛

在外掛內部，Vite 使用 Rollup 作為構建工具，你可以通過 npm 安裝任何 Rollup 外掛，將其新增到 Vite 中：

npm install –save @rollup/plugin-image

同時將它們新增到 vite.config.js 檔案的plugins陣列中：

// vite.config.js
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

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

等價Vite外掛

接下來看看一些流行的Webpack外掛和等價的Vite外掛。

HtmlWebpackPlugin -> vite-plugin-html

HtmlWebpackPlugin 可簡化 HTML 檔案的建立，以便為 Webpack 捆綁包提供服務。如果你在專案中使用 HtmlWebpackPlugin，Vite 的 vite-plugin-html 外掛也能提供類似功能。你可以這樣安裝：

npm install --save-dev vite-plugin-html

在vite.config.js中這樣引入：

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="./inject.js"></script>`,
        },
    })
  ]
})

MiniCssExtractPlugin -> vite-plugin-purgecss

MiniCssExtractPlugin 是 Webpack 的一個外掛，用於將 CSS 提取到單獨的檔案中。它會為每個包含 CSS 的 JavaScript 檔案建立一個 CSS 檔案。它通常用於生產環境，以提高 CSS 的載入效率。這樣做有兩個好處。首先，瀏覽器可以單獨快取 CSS。其次，由於 CSS 不再嵌入 JavaScript 檔案中，因此可以與 JavaScript 同步載入，從而加快頁面載入速度，防止出現沒有樣式的文字。

在Vite中，可以使用vite-plugin-purgecss：

npm install --save-dev vite-plugin-html-purgecss

在vite.config.js中這麼使用：

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

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

CopyWebpackPlugin -> vite-plugin-static-copy

CopyWebpackPlugin 用於將單個檔案或整個目錄複製到構建目錄。Vite 也有一個類似的外掛，名為 vite-plugin-static-copy：

npm install --save-dev vite-plugin-static-copy

將下列程式碼放入vite.config.js：

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

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

DefinePlugin -> define()

在 Webpack 中，DefinePlugin 用於在編譯時用分配值替換原始碼中的標記。這樣就可以建立可在編譯時設定的全域性常數。在 Vite 中，你可以使用 vite.config.js 中的 define 選項實現同樣的效果，因此可能不需要外掛：

export default defineConfig({
  define: {
    'process.env.NODE_ENV': JSON.stringify('production'),
  },
})

總結

這是一份將前端 Webpack 應用程式遷移到 Vite 的簡單指南，其中包括一些最常用的 Webpack 外掛。

如果你的專案是一個大型複雜專案，構建過程錯綜複雜，Webpack 功能豐富、設定靈活，可能仍然是你的最佳選擇。

如果你遷移的是一個較小或中等規模的專案，Vite 確實能提供一些便利。無論是伺服器啟動還是熱模組替換，它的速度都能顯著提高開發效率。其設定的簡潔性也是一個受歡迎的優勢，而且它在設計時考慮到了原生 ES 模組和現代框架的相容性，這為它的未來發展奠定了良好的基礎。

從 Webpack 過渡到 Vite 確實需要仔細規劃和測試，尤其是在考慮外掛替換或重構時。但這一舉措也會帶來可觀的回報。Vite 提供了一個更快、更精簡的開發環境，最終能帶來更順暢、更高效的開發工作流程。

時刻關注工具的發展變化總是有益的。也可以考慮探索其他現代工具，如 esbuild 和 Parcel，以找到最適合你專案需求的工具。

請記住，工具並不是最重要的，重要的是如何使用它來實現目標。Webpack、Vite、esbuild 和 Parcel 都是優秀的工具，至於使用哪種工具最好，則取決於你的具體需求和限制條件。

以上就是本文的全部內容，如果對你有所幫助，歡迎點贊、收藏、轉發~