WEBPACK 和 VITE 常用配置（对照）及迁移指南

webpack和VITE简介

webpack是一个模块打包工具，它可以将多个模块打包成一个文件，从而减少HTTP请求的次数，提高页面加载速度。webpack的配置文件是webpack.config.js。

Vite是一个新的前端构建工具，它采用完全不同的原理来打包代码。Vite使用原生ESM模块，并通过浏览器API来加载模块，因此它不需要进行打包。Vite的配置文件是vite.config.js。

webpack和VITE常用配置对照

配置项	webpack	Vite
入口文件	entry	app
输出文件	output	build
模块加载器	loader	esbuild
代码分割	optimization.splitChunks	build.rollupOptions.output.manualChunks
代码压缩	optimization.minimize	build.terserOptions
Source Map	devtool	build.sourcemap
热更新	devServer.hot	serve.hot
代理	devServer.proxy	server.proxy

webpack迁移至VITE指南

1. 安装Vite：

npm install --save-dev vite

2. 创建vite.config.js文件：

// vite.config.js
export default {
  build: {
    // ...
  },
  // ...
}

3. 将webpack.config.js中的配置项迁移至vite.config.js中。

4. 将入口文件从webpack.config.js中的entry改为vite.config.js中的app。

5. 将输出文件从webpack.config.js中的output改为vite.config.js中的build。

6. 将模块加载器从webpack.config.js中的loader改为vite.config.js中的esbuild。

7. 将代码分割从webpack.config.js中的optimization.splitChunks改为vite.config.js中的build.rollupOptions.output.manualChunks。

8. 将代码压缩从webpack.config.js中的optimization.minimize改为vite.config.js中的build.terserOptions。

9. 将Source Map从webpack.config.js中的devtool改为vite.config.js中的build.sourcemap。

10. 将热更新从webpack.config.js中的devServer.hot改为vite.config.js中的serve.hot。

11. 将代理从webpack.config.js中的devServer.proxy改为vite.config.js中的server.proxy。

12. 运行Vite：

npm run dev

结语

webpack和Vite都是非常优秀的构建工具，它们各有优缺点。希望本文能够帮助您在迁移过程中更加顺利。