目标

入口
输出
输出格式：cmd、umd、es module
图像资源
全局样式
svg生成iconfont字体图标
- webpack自动用svg生成iconfont字体图标，支持热重载
svg生成vue 组件
webpack rollup Tree Shaking sideEffects 打包库 esbuild
rollup esbuild webpack pnpm

不同工具的区别

webpack 适合用于打包 app，rollup 适合用于打包库

webpack 使用场景

打包 app
代码分隔、静态资源处理、CommonJS 依赖处理

rollup

ES2015 modules 代码

rollup

rollup 可以打包输出 es module、commonjs 等不同模块格式的文件。

shell

npx rollup -c config.js -i src/components/button/index.js -f es --name "myBundle" -o bundle.js

配置文件
配置

import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'es', // amd, cjs, es, iife, umd, system
  },
  output: [
    {
      file: 'bundle.js',
      format: 'cjs',
    },
    {
      file: 'bundle.min.js',
      format: 'iife',
      name: 'version',
      plugins: [terser()], // 压缩
    },
  ],
  plugins: [
    // 解析三方npm包
    resolve({
      // pass custom options to the resolve plugin
      moduleDirectories: ['node_modules'],
    }),
    // 解析json文件
    json(),
  ],
  // indicate which modules should be treated as external
  external: ['lodash', 'vue'],
};

Rollup will only resolve relative module IDs by default. rollup 默认不解析引用的外部三方库，如：import moment from 'moment';

插件

json

@rollup/plugin-json
rollup-plugin-postcss 
@rollup/plugin-node-resolve

postcss
postcss-url
@rollup/plugin-url

Vite

Vite 比 Webpack 快主要有以下原因：

开发服务器启动快：
- Vite 利用了现代浏览器对 ES 模块的原生支持，不需要打包就可以直接在浏览器中加载模块。由于省去了打包过程 vite 的启动速度很快，vite 可以先启动服务器然后按需加载和编译模块
- 使用了缓存机制，网络请求中有大量的 304
Vite 是使用 ESbuild 预构建依赖。Esbuild 是一个使用 Go 语言编写的打包工具，其构建速度比以 Node.js 编写的打包器要快得多
热更新快：Vite 基于高效的文件系统事件监听，能够快速检测到文件的变化并进行热更新，而 Webpack 的热更新过程相对较慢。
按需编译：只有当请求某个模块时，才会对该模块进行编译

概念

Vite 的目标仅为现代浏览器

Vite 的工作是尽可能快地将源模块转化为可以在浏览器中运行的形式

Vite 通过在一开始将应用中的模块区分为【依赖】和【源码】两类。

npm 依赖解析。

依赖强缓存【403】

【按需编译】

需要浏览器支持 ES Module ，最低支持 ES6(es2015)

功能

使用 Rollup 打包源码

Vite 能够处理依赖关系，解析处于根目录外的文件位置，这使得它即使在基于 monorepo 的方案中也十分有用。
支持多个 .html 作入口点的多页面应用模式
内置对 TypeScript 的支持，Vite 使用 esbuild 将 TypeScript 转译到 JavaScript
.jsx 和 .tsx 文件开箱即用，JSX 的转译同样是通过 esbuild。
Glob 实现批量导入模块
支持 SSR（实验性）
组件按需加载

unplugin-vue-components 和 unplugin-auto-import 这两款 vite 插件来开启按需加载及自动导入，插件会自动解析模板中的使用到的组件，并导入组件和对应的样式文件。

这两个插件一个是自动帮我们引入一些组件和指令（只做 HTML 中使用的常规组件例如各种 .vue 组件的引入以及指令的自动引入），另一个是自动帮我们做一些 API 组件的自动引入（像直接在 script 中引入的必须用 API 调用的 Message 组件以及后面我们还会用它做 Vue 的一些 API 自动引入等等）

预构建依赖

依赖预构建仅会在开发模式下应用，并会使用 esbuild 将依赖转为 ESM 模块。在生产构建中则会使用 @rollup/plugin-commonjs。

作用

兼容 UMD 和 CommonJS，开发阶段中，Vite 的开发服务器将所有代码视为原生 ES 模块。因此，Vite 必须先将作为 CommonJS 或 UMD 发布的依赖项转换为 ESM。
合并体积小的模块，减少网络请求

插件

Vite 插件是一个返回配置对象的函数，配置对象包含 name、钩子函数等属性

钩子有：

buildStart buildEnd
Options config
resolveId
transform
load

vue3 + vite配置

创建项目创建一个 Vue3+Vite 项目 2022年了，搞清楚 ESLint 和 Prettier 吧把项目跑起来跑一下项目 nvm管理&切换Node版本 nrm管理&切换镜像源让项目更健壮了解项目中每一个文件的作用安装组件库配置项目内组件 & API 的自动引入安装 VueUse 配置 ESLint 和 Prettier 配置 SVGIcon Styles 公共样式管理、初始化样式配置 UnoCSS Utils、Hooks、API 管理其他 Vite 配置添加 Config 配置配置 VSCode 推荐扩展插件

组件、API 自动导入：
SVGIcon：unplugin-icons

esbuild

esbuild 只能将代码转成 es6

杂项

.eslintignore
- **/cafe-directive
package.json 配置 directories file unpkg
npm pack

json

"files": [
    "package.json",
    "es",
    "lib",
    "dist",
    "LICENSE",
    "README.md"
  ],

插件

shell

npm github-markdown-css 
vue add style-resources-loader

不同工具的区别 ​

rollup ​

Vite ​

概念 ​

功能 ​

预构建依赖 ​

插件 ​

vue3 + vite配置 ​

esbuild ​

杂项 ​

不同工具的区别

rollup

Vite

概念

功能

预构建依赖

插件

vue3 + vite配置

esbuild

杂项