webpack 和 Vite

所在差异底层差异Webpack 和 Vite 都是前端工程化工具webpack 是基于node.js 构建的而Vite是基于esbuild进行预构建依赖esbuild是采用GO语言编写的纳秒级别的而node.js是毫秒级别的因此Vite在打包速度上比webpack有很多提升。预构建依赖: 指项目启动或者构建之前对项目中所依赖项进行预先处理和构建。主要做的好处在于当项目实时运行时可以直接使用这些已经构建好的依赖无需再次编译提高运行速度和效率。ES Modules通过使用export和import语句ES Modules 允许在浏览器端导入和导出模块。当使用 ES Modules 进行开发时开发者实际上是在构建一个依赖关系图不同依赖项之间通过导入语句进行关联。webpack相关配置webpack提供配置项和插件系统 在webpack.config.js文件中进行各种配置定制化构建项目。mode设置打包的模式production为生产模式development为开发模式module.exports { mode:production, }entry指定打包入口文件 默认为./src/index.jsmodule.exports { entry:./src/a.js, }也可以使用数组 设置多个打包入口文件 最后打包为一个文件entry:{ aa:./src/a.js, bb:./src/b.js },对象形式也可设置多个入口文件但是会打包成多个文件。Webpack 会将value文件打包成key.js文件比如上述例子会将./src/a.js文件打包成aa.js文件、./src/b.js件打包成bb.js文件。output对打包后的文件进行配置默认打包文件地址为./dist/main.jsconst path require(path) module.exports { output:{ filename: bundle.js, //打包后的文件名 clean: true, //每次打包前清除上次打包的文件 path: path.resolve(__dirname, hello), //打包后的文件存放路径必须要绝对路径 } }在filename中Webpack提供模版字符串的形式可以自动生成唯一文件名filename: [name].js打包多个文件时匹配对应的文件名,[name]与 entry 中的 key 对应。filename: [hash].js会随机生成哈希值一般用于区分版本。loaderWebpack默认情况下只会处理 js 文件如果我们希望它可以处理其他类型的文件则要为其引入loader配置loaderrules是一个数组允许我们配置多个loadertest属性是一个正则表达式用于匹配对应loader的文件use属性则是匹配对应loader。 loader遵循职责单一原则一个loader只做一件事情如果你想在打包的文件中使用上css光有解析loader还不够还需要安装另一个loadermodule:{ rules:[ { test:/\.css$/, //匹配文件 use:css-loader }, ] }module.exports { module:{ rules:[ { test:/\.css$/, //匹配文件 use:[style-loader,css-loader] //从后往前执行,有顺序要求 }, ] } }如果我们配置多个loader则用数组存放存放的顺序遵循从右往左先执行的放右边否则会报错。这里先编译css再使用所以顺序为style-loader,css-loader。babel-loader在编写js代码时经常需要使用一些js中的新特性而新特性在旧的浏览器中兼容性并不好。但是我们现在希望能够使用新的特性我们可以采用折中的方案。依然使用新特性编写代码但是代码编写完成时我们通过一些工具将新代码转换为旧代码。Babel 就是这样一个工具可以将新的js语法转换为旧的js以提高代码的兼容性。我们如果希望在Webpack支持babel则需要向Webpack中引入babel-loader。module:{ rules:[ { test: /\.m?js$/, //以.mjs或js后缀的文件 exclude: /(node_modules|bower_components)/, //排除node_modules中的文件 use: { loader: babel-loader, options: { presets: [babel/preset-env] //根据目标浏览器或运行时环境自动选择合适的转换规则 } } } ] }将箭头函数打包成普通函数。pluginplugin 的作用是 Webpack 扩展功能。loader 可以理解为转换器用于处理模块之间的转换plugin 则用于执行更广泛的任务它可以访问 Webpack 的生命周期在合适的时机执行插件的功能。1.html-webpack-plugin自动生成 HTML 文件并自动引入打包后的 JS/CSS。plugins:[ //自动创建html文件 new HTMLPlugin({ title:Hello Webpack, //配置html文件的标题 template:./src/index.html //以哪个文件为模版创建 }) ]2.clean-webpack-plugin 每次打包前自动清空dist目录。const { CleanWebpackPlugin } require(clean-webpack-plugin) plugins: [new CleanWebpackPlugin()]3.terser-webpack-plugin 压缩 JS 代码生产环境必备const TerserPlugin require(terser-webpack-plugin) optimization: { minimizer: [new TerserPlugin()] }4.define-plugin 定义全局常量比如环境变量。const webpack require(webpack) plugins: [ new webpack.DefinePlugin({ process.env.NODE_ENV: JSON.stringify(production) }) ]5.vue-loader-plugin Vue 项目必须配合vue-loader使用。const { VueLoaderPlugin } require(vue-loader) plugins: [new VueLoaderPlugin()]devServer.proxyWebpack 代理后端接口就是用devServer.proxy实现跨域转发// webpack.config.js module.exports { devServer: { proxy: { // 前端请求 /api/xxx 时转发到后端 /api: { target: http://localhost:8080, // 后端真实地址 changeOrigin: true, // 必须加解决跨域 pathRewrite: { ^/api: } // 可选去掉 /api 前缀 } } } }vite常见配置Webpack 是先打包再运行而 Vite 开发时并不打包而是直接采用 ES Module 运行项目部署的时候再打包开箱即用。server开发服务配置// 开发服务 server: { host: 0.0.0.0, // 局域网可访问 port: 3000, // 端口 open: true, // 自动打开浏览器 cors: true, // 跨域 // 接口代理最常用 proxy: { /api: { target: http://localhost:8080, // 后端接口地址 changeOrigin: true, // 跨域 rewrite: (path) path.replace(/^\/api/, ), // 去掉 /api 前缀 }, // 可以配置多个代理 /upload: { target: http://localhost:9000, changeOrigin: true, }, }, },resolve路径别名resolve: { alias: { // 指向 src : fileURLToPath(new URL(./src, import.meta.url)), // 还可以加更多 /utils: fileURLToPath(new URL(./src/utils, import.meta.url)), }, // 导入时省略的后缀 extensions: [.js, .vue, .json], },plugins插件plugins: [ vue(), // 自动按需引入组件Vant/ElementPlus 常用 Components({ resolvers: [VantResolver()], }), ],Vite 开发和生产构建分别用什么开发环境基于ESM的开发服务器生产环境使用Rollup打包原因Rollup 打包产物更小、tree‑shaking 更好适合上线loader 和 plugin 在 Vite 里对应什么Vite 没有 loader 概念文件处理Vite 内置了大多数格式vue、ts、jsx、css 等扩展功能使用Vite 插件兼容 Rollup 插件Vite 环境变量规则必须以VITE_开头文件名.env全局.env.development开发Vite 热更新HMR原理检测文件修改编译修改的文件通过 WebSocket 推送到浏览器只更新对应模块不刷新页面Vite 有哪些缺点 / 限制不支持 IE 等老浏览器生态比 Webpack 少一些某些复杂旧项目迁移成本高开发依赖浏览器 ESM在特殊内网环境可能有兼容问题Vite 如何做代码分割 / 分包使用 build.rollupOptionsbuild: { rollupOptions: { output: { manualChunks: { vue: [vue], vant: [vant] } } } }