webpack轉vite的操作流程與問題是什么

今天小編給大家分享一下webpack轉vite的操作流程與問題是什么的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、全局安裝wp2vite

npm install -g wp2vite

二、在項目中執行一下命令

執行之前記得安裝好依賴：npm install

wp2vite --config=./vue.config.js //你的webpack配置文件

執行完以上命令后再執行一遍：npm install

截止這一步，主要操作搞定

三、項目配置操作

1、刪除原有public目錄下的index.html文件

2、修改根目錄下的index.html，引用自己的main.js文件

<script type="module" src="/src/main.ts"></script>

我的是ts，可自行修改

3、重點：vite.config.js

①設置alias,增加絕對路徑@

let alias = {
    '.git': path.resolve(__dirname, './.git'),
    'docker': path.resolve(__dirname, './docker'),
    'docs': path.resolve(__dirname, './docs'),
    'node_modules': path.resolve(__dirname, './node_modules'),
    'public': path.resolve(__dirname, './public'),
    'src': path.resolve(__dirname, './src'),
    '@': path.resolve(__dirname, 'src'),
  }

②設置proxy,就是你的代理

在proxy對象中添加代理

注意此時寫法有變，將pathRewrite修改為rewrite，舉個栗子

vue.config.js

	'/api': {
        target: `http://localhost:8180`,
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': '',
        },
      },

vite.config.js

'/api': {
      target: `http://localhost:8180`, 
      changeOrigin: true,
      ws: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    },

4、require報錯

如果你用到了require.context（），請替換為import.meta.globEager（），示范如下

const requires = require.context('@/modules', true, /router\.ts$/);//原有
const requires = import.meta.globEager("@/modules/*/router.ts")//修改后

5、path.resolve報錯

先安裝依賴

npm install path-browserify --save

修改引入方式為

import path from 'path-browserify'

四、啟動項目

npm run dev

五、速度比較

啟動速度

vite

webpack

實在太慢，不想截圖了

熱更新速度

biu~bang //超級快

錄了視頻，但是要轉成gif，不想轉，改vue頁面改完就能生效，都不用刷新頁面；改ts文件也是立刻生效，會自動刷新頁面

以上就是“webpack轉vite的操作流程與問題是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。