文章目录
- 1、vite和webpacke的区分
- 2、vite的常规配置
- 介绍
- 主要部分介绍
- vite基本配置示例
- 3、webpacke的常规配置
- 介绍
- 主要部分介绍
- Webpack 基本配置示例
1、vite和webpacke的区分
- 相同点: 都是构建工具,用于资源打包 ; 都有应用到摇树原理 tree shaking。
Tree-shaking 是指在打包过程中通过静态分析,识别并删除未使用的代码,以减小最终输出文件的大小。
- 不同点
不同点 vite webpacke 插件生态 相对较少 非常丰富 配置复杂度 在设计上更注重开箱即用,大部分场景下用户无需自己写配置文件 配置相对复杂,对新手不够友好 开发模式 采用了基于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: './', // 指定构建的目标目录,默认为 "dist" build: { outDir: 'dist', }, // 项目的基础公共路径,默认为 "/" base: '/', // 指定静态资源目录,默认为 "public" publicDir: 'public', // 配置插件,可以在这里添加 Vite 插件 plugins: [ vue(), // 添加 Vue 插件 ], // 配置解析选项,例如别名等 resolve: { alias: { '@': '/src', // 设置 @ 别名指向 src 目录 }, }, // 配置开发服务器 server: { port: 3000, // 指定开发服务器端口,默认为 3000 open: 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/css) new 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' };
- 不同点
- 相同点: 都是构建工具,用于资源打包 ; 都有应用到摇树原理 tree shaking。
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...