Dev环境用vite替换webpack获得极致开发体验🥰

背景

可能你会好奇的问：“我项目已用webpack配置开发和生产环境打包，好好的为啥我要切换呢？”。有这么一种情况你肯定也碰到过，在开发中需要修改某个组件，搜索时发现很多个相同名组件，但是属于不同的目录，这时你很难确定用的是哪个组件？

Untitled

想到解决方案

方案一：严格规定项目中每个名字独立无二（不靠谱，不管单人还是多人都很难保证名字不重复）
方案二：利用vite-plugin-vue-inspector插件（当前非常流行的方案）

此时也面临一个问题，由于项目是基于webpack来构建的，网络上搜索了一大圈都没有找到webpack-plugin-vue-inspector 的东西，所以接下来只有两条路走。

第一条路：参考**vite-plugin-vue-inspector实现原理，自己实现一个**webpack-plugin-vue-inspector插件
另外一条路：将项目dev环境支持vite 启动开发

我选择的是将项目dev环境支持vite启动开发，原因：vite 目前已经非常成熟，而且借助esbuild极好的开发体验

配置vite

jsx

yarn add vite -D

如果不知道如何开始，可以从vite官网最简单的demo开始。从demo了解下我们需要哪些东西，以及进行哪些配置？

需要的东西

index.html

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

此时：入口脚本与html写死了，webpack中都是采用HtmlWebpackPlugin 都是指定入口html然后自动注入入口js，所以这里要调整。可以采用vite-plugin-html-template 解决

vite.config.js

jsx

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

示例demo看不到什么配置，我们看webpack.dev.config 的配置

由于我的项目webpack.dev.conf内容较多，我就只把相关的配置列出来。

jsx

module.exports = merge(baseWebpackConfig, {
 mode: "development",
 ...
 devServer: {
  ...
  proxy: config.dev.proxyTable,
  ...
 },
 module: {
  rules: [
   ...
   {
    test: /\.s[ac]ss$/i,
    use: [
     "vue-style-loader",
     ...autoInjectSourceMap([
      "css-loader",
      "postcss-loader",
      "sass-loader",
      {
       loader: "sass-resources-loader",
       options: {
        resources: [resolveResouce("variables.scss")],
        sourceMap: config.dev.sourceMap,
       },
      },
     ]),
    ],
   },
   ...
  ],
 },
 stats: { children: false },
 plugins: [
  new webpack.DefinePlugin({
   "process.env": config.dev.env,
  }),
  new VueLoaderPlugin(),
  new HtmlWebpackPlugin({
   filename: "index.html",
   template: config.htmlTempletePath,
   inject: true,
  }),
 ],
});

通过以上配置，我们需要给vite.config.js 添加对应的配置内容如下

支持环境变量定义
支持sass变量定义
支持alias定义
支持proxyTable

最终vite.config.js 大体内容如下：

jsx

const { defineConfig } = require("vite");
const config = require("./config");
const path = require("path");
const pcwd = process.cwd();
const htmlTemplate = require("vite-plugin-html-template").default;
const vue = require("@vitejs/plugin-vue2");
const envCompatible = require("vite-plugin-env-compatible").default;
const htmlConfig = require('vite-plugin-html-config');
const Inspector = require('vite-plugin-vue-inspector').default;

...

function normalizeAutoInjectConfig(injectConfig) {
 const links = injectConfig.links?.map(item => {
  const res = {};
  for (const key of Object.keys(item)) {
   if (item[key]) {
    res[key] = item[key];
   }
  }
  return res;
 }) ?? [];
 const headScripts = injectConfig.scripts?.map(item => {
  let { importName, globalVariableName, position, ...itemSurplus } = item;
  return itemSurplus;
 }) ?? [];
 return { links, headScripts }
}

module.exports = defineConfig(() => {
 const env = config.dev.env;
 const envObj = {};
 for (const key of Object.keys(env)) {
  envObj[`process.env.${key}`] = env[key];
 }

 return {
  define: envObj,
  mode: "development",
  resolve: {
   alias: {
    "@": path.join(pcwd, "src")
   },
   extensions: [".mjs", ".js", ".mts", ".jsx", ".json", ".vue", ".svg", ".png", ".jpg", ".jpeg"]
  },
  css: {
   devSourcemap: true,
   preprocessorOptions: {
    scss: {
     additionalData: "@import '@/style/variables.scss';",
    }
   }
  },
  server: {
   proxy: config.dev.proxyTable
  },
  plugins: [
   vue(),
   envCompatible({
    moutedPath: "process.env",
   }),
   htmlTemplate({
    entry: "./src/main.js"
   }),
   Inspector({ vue: 2, toggleComboKey: "alt-`" }),
   //! 说明：存在循环依赖解决方法，相关资料：https://github.com/vitejs/vite/issues/3033
   {
    name: "singleHMR",
    handleHotUpdate({ modules }) {
     modules.map((m) => {
      m.importedModules = new Set();
      m.importers = new Set();
     });

     return modules;
    },
   },
  ],
 }
})

总结

当我们无从下手时，就可以从一个官网的demo来入手
当从webpack切换至vite时，你想不到会出现哪些问题，就先配出一个最简单的配置，然后逐步完善掉

自从用上vite+https://github.com/webfansplz/vite-plugin-vue-inspector，我再也不用纠结我的代码有没有改对位置了，而且开发体验极速提升。赶快把dev webpack换成vite吧🥰

Dev环境用vite替换webpack获得极致开发体验🥰 ​

背景 ​

配置vite ​

总结 ​

参考文献 ​

Dev环境用vite替换webpack获得极致开发体验🥰

背景

配置vite

总结

参考文献