9.webpack和vite

leezozz 10/17/2023 vue

# webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）
Vue 脚手架工具 vue-cli 使用 webpack 进行打包，开发时可以启动本地开发服务器，实时预览。因为需要对整个项目文件进行打包，开发服务器启动缓慢。
而对于开发时文件修改后的热更新 HMR 也存在同样的问题。
Webpack的热更新会以当前修改的文件为入口重新 build 打包，所有涉及到的依赖也都会被重新加载一次。

webpack根据webpack.config.js中的入口文件，在入口文件里识别模块依赖，不管这里的模块依赖是用CommonJS写的，还是ES6 Module规范写的，webpack会自动进行分析，并通过转换、编译代码，打包成最终的文件。最终文件中的模块实现是基于webpack自己实现的webpack_require（es5代码），所以打包后的文件可以跑在浏览器上。

同时以上意味着在webapck环境下，你可以只使用ES6 模块语法书写代码（通常我们都是这么做的），也可以使用CommonJS模块语法，甚至可以两者混合使用。因为从webpack2开始，内置了对ES6、CommonJS、AMD 模块化语句的支持，webpack会对各种模块进行语法分析，并做转换编译。

# webpack打包原理

项目中散落着各种代码以及资源文件，这些代码、资源文件都可以看做是项目中的模块，webpack会根据我们的配置找到一个文件，作为入口文件。

一般是main.js文件，顺着这个文件中的代码，代码中出现的import和require之类的语句，解析推断出这个文件所依赖的资源模块，分别解析每个模块的依赖，最后形成每个项目中所有用到的文件之间的依赖关系树。

有了这个依赖关系树后，webpack会遍历，或者更准确地说：递归这个依赖关系树，找到每个节点对应的资源文件，然后根据配置文件中的loader配置，交给加载器去加载这个模块。

最后将加载的结果放入bundle.js，也就是打包结果中，从而实现整个项目的打包。

# 使用loader

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。
loader是webpack中一个非常核心的概念, loader有很多种, 不同的内容需要使用不同的loader来加载
首先安装对应的 loader：

npm install --save-dev css-loader ts-loader

指示 webpack 对每个 .css 使用 css-loader以及对所有 .ts 文件使用 ts-loader
将ES6转换成ES5,将scss, less转成css

# loader相关配置

// css-loader: 只负责加载css文件
// style-loader: 负责将样式加载到Dom中
// 在解析css的过程中, 先用到的是css-loader, 然后使用到的是style-loader
// 但loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)，所以use中的顺序是不能改变的

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 创建项目

基于构建工具webpack

vue create 项目名称

例如：该项目有100多个.vue文件，修改了其中一个，Webpack的热更新会以当前修改的文件为入口重新build打包，其他的页面也会重新更新打包，所有涉及到的依赖也都会被重新加载一次（开发环境下，编译慢）。

# vite

是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源

# Vite生产环境为什么选择Rollup做构建工具

Rollup是基于ES6的JavaScript打包工具。
它将小文件打包成一个大文件或者更复杂的库和应用，打包既可用于浏览器和Node.js使用。 
Rollup最显著的地方就是能让打包文件体积很小。
相比其他JavaScript打包工具，Rollup总能打出更小，更快的包。
因为Rollup基于ES6模块，比Webpack和Browserify使用的CommonJS模块机制更高效。

1
2
3
4
5

# 优点

因为没有打包工作要做，所以服务器冷启动非常快【快速的冷启动】
代码是按需编译的，因此只有在当前页面上实际导入的代码才会编译，不必等到整个应用程序打包后才开始开发，这对于有几十个页面的应用程序来说是一个很大的不同【真正按需编译】
热模块更新（HMR）的性能与模块总数解耦，这使得无论应用程序有多大，HMR都能保持快速【即时热模块更新】

# 创建项目

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

默认版本是vue3

使用npm

npm create vite@latest

使用yarn

yarn create vite@latest

使用pnpm

pnpm create vite@latest

8. watch和watchEffect 1.基本使用

leezozz-blog

Choose mode