如何将Webpack项目中的Vite加速兼容模式改写为长尾关键词？

本文共计2230个文字，预计阅读时间需要9分钟。

目录 + 前言 + 目的 + 需要处理的难题 + 动手 + 共用 + index. + 共用配置 + 兼容环境变量 + 自动导入 + 资源引入 + svg-sprite-loader + 替代方案 + 其他 + 效果 + 前言 + 随着公司前端工程的不断扩大，启动是无限的等待，优化是永恒的追求。

目录

• 前言
• 目的
• 要处理的问题
• 动手
• 共用 index.html
• 共用配置
• 兼容环境变量
• 自动导入
• 资源引入
• svg-sprite-loader 替代方案
• 其他
• 效果

前言

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

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

目的

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