JavaScript打包工具是什么_Webpack如何工作？

Webpack通过入口文件构建依赖图，将模块封装为函数并用__webpack_require__模拟模块系统，借助Loader翻译文件、Plugin执行宏观任务，Dev Server提供HMR热更新提升开发体验。

JavaScript打包工具是把多个JS文件、模块、资源（比如CSS、图片）整合成一个或几个优化后的文件的程序。Webpack是最主流的打包工具，它的核心思路是“一切皆模块”，把项目中所有依赖都当模块处理，再通过依赖图把它们打包成浏览器能运行的代码。

Webpack怎么识别和组织代码依赖？

Webpack从你配置的入口文件（比如src/index.js）开始，逐行扫描import、require、import()等语句，自动构建出一张完整的依赖关系图。这张图决定了哪些模块要被包含、以什么顺序加载。

• ES6 import 和 CommonJS require 都能被识别
• 动态导入import('./module.js')会生成单独的chunk，支持按需加载
• 不仅限于JS，通过loader还能把CSS、Vue、TS、图片等也纳入依赖图

Webpack如何把模块变成浏览器可用的代码？

它不是简单拼接文件，而是把每个模块包装成函数，用自执行函数（IIFE）管理作用域，再通过内部的__webpack_require__模拟模块系统。这样即使原始代码用了ES6模块语法，也能在不支持模块的老浏览器里运行。

• 每个模块被赋予唯一ID，运行时靠ID查找和执行
• 导出内容被统一挂到exports或module.exports上
• 打包结果里看不到import/export，全被替换成函数调用和对象操作

Loader和Plugin分别干啥？

Loader负责“翻译”单个文件：比如把TypeScript编译成JS、把SCSS转成CSS、把图片转成base64字符串。Plugin则在打包流程的关键节点（如生成文件前、优化完成后）介入，做更宏观的事，比如清理输出目录、注入全局变量、压缩代码、分离CSS。

标签： css vue react javascript es6 java html js typescript 浏览器 工具