webpack理解

1. 背景、开发遇到的问题

2. 什么是Webpack

3. 特性

答：

1. Webpack 最初的目标是实现前端项目的模块化，旨在更高效地管理和维护项目中的每一个资源

除了模块加载的问题以外，还需要规定模块化的规范，如今流行的则是CommonJS、ES Modules

我们开发过程中会遇到如下的问题：

而webpack恰巧可以解决以上问题

2. webpack 是一个用于现代JavaScript应用程序的静态模块打包工具

这里的静态模块指的是开发阶段，可以被 webpack 直接引用的资源（可以直接被获取打包进bundle.js的资源）

当 webpack处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块（不再局限js文件），并生成一个或多个 bundle

3.

补充

补充：webpack 核心关键词速记：

入口（entry）：构建依赖图的起点，默认 ./src/index.js。

输出（output）：filename、path、publicPath 决定产物落盘位置与 URL 前缀。

loader：把非 JS 资源（CSS、图片、TS、Vue）转换为 JS 模块的"翻译官"。

plugin：基于 Tapable 事件流机制干预构建生命周期（HTML 生成、CSS 抽取、环境变量注入、产物分析等）。

mode：development（默认开启 eval-source-map）/ production（默认开启压缩、tree-shaking、scope hoisting）。

chunk：最终产物的基本单位；通过 splitChunks 把第三方依赖、共享代码、业务代码拆开。