失控玩家

Webpack 入门

🧠 Mind

核心概念

• Entry：编译入口，webpack 编译的起点
• Compiler：编译管理器，webpack 启动后会创建 compiler 对象，该对象一直存活知道结束退出
• Compilation：单次编辑过程的管理器，比如 watch = true 时，运行过程中只有一个 compiler 但每次文件变更触发重新编译时，都会创建一个新的 compilation 对象
• Dependence：依赖对象，webpack 基于该类型记录模块间依赖关系
• Module：webpack 内部所有资源都会以“module”对象形式存在，所有关于资源的操作、转译、合并都是以 “module” 为基本单位进行的
• Chunk：编译完成准备输出时，webpack 会将 module 按特定的规则组织成一个一个的 chunk，这些 chunk 某种程度上跟最终输出一一对应
• Loader：资源内容转换器，其实就是实现从内容 A 转换 B 的转换器
• Plugin：webpack 构建过程中，会在特定的时机广播对应的事件，插件监听这些事件，在特定时间点介入编译过程

Webpack 是什么

Webpack is a static module bundler for modern JavaScript applications.

• bundler（打包）：Webpack 可以将帮助我们进行打包，所以它是一个打包工具；
• static（静态）：可以将代码打包成最终的静态资源（部署到静态服务器）；
• module（模块化）：默认支持各种模块化开发，ES Module、CommonJS、AMD 等；
• modern（现代的）：正是因为现代前端开发面临各种各样的问题，才催生了 Webpack 的出现和发展；

为什么需要 Webpack

• 兼容：让 JS 新语法能正常运行在低版本浏览器上
• 规范各类资源的打包

核心

Loader

使用 loader 加载各类文件，本质是对引入模块源代码进行转换。

Plugin

利用 Webpack 的 hooks 执行更广泛的任务。

特性

• 配置环境分离
• 代码分离（Code Splitting）