网站的前端和后端,天津津坤科技发展有限公司,在线文档 wordpress,不要域名做网站文章目录 1、vite和webpacke的区分2、vite的常规配置介绍主要部分介绍vite基本配置示例 3、webpacke的常规配置介绍主要部分介绍Webpack 基本配置示例 1、vite和webpacke的区分
相同点#xff1a; 都是构建工具#xff0c;用于资源打包 #xff1b; 都有应用到摇树原理 tre… 文章目录 1、vite和webpacke的区分2、vite的常规配置介绍主要部分介绍vite基本配置示例 3、webpacke的常规配置介绍主要部分介绍Webpack 基本配置示例 1、vite和webpacke的区分
相同点 都是构建工具用于资源打包 都有应用到摇树原理 tree shaking。 Tree-shaking 是指在打包过程中通过静态分析识别并删除未使用的代码以减小最终输出文件的大小。 不同点
不同点vitewebpacke插件生态相对较少非常丰富配置复杂度在设计上更注重开箱即用大部分场景下用户无需自己写配置文件配置相对复杂对新手不够友好开发模式采用了基于ES Module的开发服务器只有在需要时才会编译对应的模块大幅度提升了开发环境的响应速度。在开发模式下依然会对所有模块进行打包操作虽然提供了热更新但大型项目中依然可能会出现启动和编译缓慢的问题打包效率利用了浏览器对ES Module的原生支持只打包和缓存实际改动的模块从而极大提高了打包效率会把所有的模块打包成一个bundle这会导致初次加载速度较慢热更新机制热更新是增量更新只更新修改的文件所以即使在大型应用中也能保持极快的编译速度热更新是全量更新即使修改一个小文件也会重新编译整个应用这在大型应用中可能会导致编译速度变慢应用场景凭借其轻量和速度更适合于中小型项目和快速原型开发其丰富的功能和扩展性适合于大型、复杂的项目
2、vite的常规配置
介绍
vite官网
vite是一个由Vue.js开发的构建工具它利用了ES Module Imports在开发环境下可以实现按需编译加快了开发速度。而在生产环境下它使用Rollup进行打包提供更好的tree-shaking、代码压缩和性能优化。 vite主要解决了现有工具如webpack、rollup在大型项目开发过程中存在的启动慢、热更新慢等问题。vite致力于为现代前端工作流提供一个更快、更轻的解决方案。
Vite的特点包括
快速的启动时间。通过区分依赖和源码两类模块改进了开发服务器启动时间。轻量快速的热重载。无论应用程序的大小如何都始终很快的模块热重载(HMR)。即时更新。具有HMR功能的框架可以利用Vite提供的原生ESM的HMR API提供即时、准确的更新而无需重新加载页面或清除应用程序状态。按需编译返回。Vite在开发模式下不需要打包只需要编译浏览器发出的HTTP请求对应的文件即可因此热更新速度很快。
主要部分介绍
root: 指定项目的根目录默认为当前工作目录。在这个例子中我们设置为 ./表示当前目录。build: 配置构建选项其中 outDir 指定了构建的目标目录即打包输出的目录。base: 指定项目的基础公共路径默认为 /用于在构建时生成链接。例如如果设置为 /my-app/那么构建时生成的链接会以 /my-app/ 开头。publicDir: 指定静态资源目录默认为 public用于存放不需要经过 Vite 处理的静态资源文件。plugins: 配置插件可以在这里添加 Vite 插件例如 Vue 插件等。resolve: 配置解析选项例如设置别名等使得在项目中可以使用别名来引用模块。server: 配置开发服务器可以设置端口号、是否自动打开浏览器等选项。optimizeDeps: 配置优化选项例如按需加载依赖项等。
vite基本配置示例
// vite.config.js
import { defineConfig } from vite
import vue from vitejs/plugin-vue; // 导入 Vue 插件
export default defineConfig({// 项目根目录默认为当前工作目录root: ./,// 指定构建的目标目录默认为 distbuild: {outDir: dist,},// 项目的基础公共路径默认为 /base: /,// 指定静态资源目录默认为 publicpublicDir: public,// 配置插件可以在这里添加 Vite 插件plugins: [vue(), // 添加 Vue 插件],// 配置解析选项例如别名等resolve: {alias: {: /src, // 设置 别名指向 src 目录},},// 配置开发服务器server: {port: 3000, // 指定开发服务器端口默认为 3000open: true, // 启动开发服务器时自动打开浏览器proxy: { // 代理/api: { target: http://11.11.11.11:9900/,changeOrigin: true, rewrite: path path.replace(/^\/api/, )},}},// 配置优化选项例如按需加载依赖项等optimizeDeps: {// 可以配置优化依赖项的行为},
});
3、webpacke的常规配置
介绍
webpacke官网
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)然后将你项目中所需的每一个模块组合成一个或多个 bundles它们均为静态资源用于展示你的内容。
主要部分介绍
entry入口: 指定入口文件为 src/main.js。output输出: 输出指示webpack打包后的资源bundles输出到哪里以及如何命名。resolve 配置模块: 配置模块解析的相关选项例如文件扩展名和别名。module.rules模块解析: 配置处理不同类型模块的规则例如处理 Vue 单文件组件、使用 Babel 转译 JavaScript、处理样式文件等。plugins插件: 配置使用的插件例如生成 HTML 文件、处理 Vue 单文件组件等。devServer开发服务器: 配置开发服务器的相关选项例如内容的来源、压缩、端口等。devtool: 配置生成 source map 的方式方便调试。
Webpack 基本配置示例
// vue.config.js
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const { VueLoaderPlugin } require(vue-loader);module.exports {// 入口文件entry: ./src/main.js, output: { // 输出路径 __dirname是nodejs的变量代表当前文件webpack.js目录的绝对路径path: path.resolve(__dirname, dist), // 输出文件名filename: bundle.js, publicPath: /,},resolve: {// 用于指定在引入模块时可以省略的文件扩展名,可以让你在引入文件时不需要写明文件的扩展名extensions: [.js, .vue],// 用于创建模块路径的别名可以简化模块引入的路径,可以让你使用 来代替 src 目录的绝对路径。alias: {: path.resolve(__dirname, src),},},module: {rules: [{test: /\.vue$/,loader: vue-loader,},{test: /\.js$/,exclude: /node_modules/,use: {loader: babel-loader,},},{// test:使用正则匹配文件// 这个规则表示当 Webpack 遇到以 .css 结尾的文件时会先使用 css-loader 处理然后再使用 style-loader 将样式注入到页面中。test: /\.css$/,use: [style-loader, css-loader],},{test: /\.(png|jpe?g|gif)$/i,use: [{loader: file-loader,options: {name: [name].[ext],outputPath: images,},},],},],},plugins: [// html-webpack-plugin插件会打包html文件// 功能会默认创建一个空的html自动引入打包后输出的所有资源js/cssnew HtmlWebpackPlugin({template: ./public/index.html,filename: index.html,favicon: ./public/favicon.ico,}),// VueLoaderPlugin这个插件是 Vue Loader 的一个插件用于解析和转换 Vue 单文件组件。new VueLoaderPlugin(), ],devServer: {// 指定服务器的根目录告诉服务器从哪里提供内容contentBase: path.join(__dirname, dist), compress: true,// 指定开发服务器的端口号默认为 8080。port: 9000,open: true,// 设置代理用于解决跨域请求问题。可以将某些 URL 下的请求代理到另外一个服务器。proxy: {/api: {target: http://11.11.11.11:9900/,changeOrigin: true,ws: true,pathRewrite: {: ,},},},},devtool: eval-source-map,// 模式 用于指定当前构建的模式。它有三个可选值development、production 和 none。mode: development
};
