webpack项目中使用vite加速的兼容模式详解_vue.js_

前言

随着公司前端工程越来越大，启动是无尽的等待，修改是焦急的等待。

vite 到现在生态也起来了，就有了把项目改造成 vite 的想法，但是项目后面可能要依赖 qiankun 改造成微前端项目，现在 qiankun 对 vite 还没有好的解决方法，我就想采取一个折中的办法，保留 webpack，再兼容 vite，两条路都留着。

目的

• 可以用 vite 跑开发环境。
• 可以用 webpack 跑开发环境。
• 暂时用 webpack 打包，等后面有解决方案再全面转 vite。

要处理的问题

要走的是兼容模式，原来项目的代码能不动的尽量不动。

• 共用 index.html（使用一个 index.html）。
• 共用配置（让 webpack 和 vite 共用一些配置，减少每次配置都要两边看的情况）。
• 兼容环境变量（环境变量 vite 是 import.meta.env，webpack 是 process.env，不修改原来的 process.env 写法还兼容 vite）。
• 自动导入（自动导入在 webpack 里面用 require.context，vite 里面无法使用）。
• 资源引入（原来使用 require 方式引入图片资源的需要改动，"~xxx/dist/xxx.css" 以 ~ 开头引入资源的方式兼容处理）。
• svg-sprite-loader 替代方案。

动手

共用 index.html

vite 中 index.html 是在根目录放的，webpack 在 public 下面放的，我们把 index.html 放到外面。

下面是咱们 webpack 的开发模式和生产模式。

"dev": "vue-cli-service serve", "build": "vue-cli-service build", 

我们可以利用 npm hook 做一点事情，这样每次在 dev，build 这两个命令运行之前我们都可以先执行自己的脚本。

"predev": "node ./command/html.js", "prebuild": "node ./command/html.js", "dev": "vue-cli-service serve", "build": "vue-cli-service build", 

// ./command/html.js const path = require('path') const fs = require('fs') // 把 index.html 拷贝到 public 下 fs.copyFileSync(path.resolve('./index.html'), path.resolve('./public/index.html')) 

vite 中的 index.html 需要一个这样的标签来指定入口文件，但是我们在 webpack 中不需要，我们可以借助插件来处理。