【前端学习】字节跳动青训营——对于Webpack的构建流程

对于本次的构建过程学习笔记

课程简介

由浅入深，从应用技巧到组件开发，再到 Webpack 构建流程的基本原理剖析，最后总结一套学习方法论，帮助读者 0 基础搭建 Webpack 知识体系。

课前准备

安装浏览器

1. 请下载安装最新版本 NodeJS 环境；
2. 请下载安装一个「现代」浏览器，比如 Chrome、Firefox、Edge 等。推荐使用最新版的 Chrome 浏览器。

安装编辑器

要进行前端开发，一个趁手的编辑器必不可少。强烈推荐使用 Visual Studio Code，如果你习惯使用其它编辑器也是可以的。

提前阅读

课前建议先充分了解 Webpack 的基本功能与作用，参考资料：Webpack 官网，建议根据官网文档手动搭建若干示例。

课后阅读材料

• 深度剖析 Webpack 系列
• 深入浅出 Webpack
• Webpack Book
• Configuration | webpack
• Awesome-webpack-4plus

课程概览

本课程主要分为五个方面:

1. 构建工具的意义
2. Vite 概览介绍
3. Vite 上手实战
4. Vite 整体架构
5. Vite 进阶路线

前期准备

安装 Node.js

可以选择以下一种方式：

• 从 Node.js 官网安装 nodejs.org/en/
• Mac, Linux 环境可以使用 nvm 进行安装 github.com/nvm-sh/nvm NVM_NODEJS_ORG_MIRROR=npmmirror.com/mirrors/nod… nvm install 16

安装 pnpm

执行如下命令即可:

npm i -g pnpm

然后安装chrome浏览器