WebPack构建工具

一.WebPack是什么,有什么用

1.介绍

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

Webpack 的核心功能确实是打包 HTML、JS、CSS 等前端资源，但它的能力远不止于此。

2.基础打包能力

3.进阶核心能力

(1).代码分割

• 拆分代码到多个 bundle

• 动态加载（懒加载）

// 动态导入
import('./module.js').then(module => {...})

(2).Tree Shaking

• 消除未使用的 JS 代码（依赖 ES Modules）

• 示例：只导入 lodash 的部分功能

import { debounce } from 'lodash-es'  // 仅打包 debounce

(3).Tree Shaking