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

前言

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

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 中不需要,我们可以借助插件来处理。


                    
                    

你可能感兴趣的:(webpack项目中使用vite加速的兼容模式详解)