webpack

webpack 是什么

webpack 是一个模块打包器（module bundler）。它的核心目标是把 JavaScript 模块打包成可在浏览器中运行的产物，同时也能转换、打包几乎任意类型的资源。

核心能力

• 同时支持 ES Modules、CommonJS、AMD 等模块规范，甚至可混合使用
• 生成单个 bundle 或多个 chunk，运行时按需异步加载，降低首屏体积
• 编译期完成依赖解析，减少运行时代码量
• 通过 Loader 预处理文件，例如 TypeScript 转 JavaScript、图片转 Base64
• 提供高度模块化的 插件系统，可扩展出各类构建能力

基本安装

npm install --save-dev webpack
# 或
yarn add webpack --dev

概念速览

Loader：用于在编译阶段预处理文件，让 webpack 能处理 JavaScript 之外的静态资源。JavaScript、JSON 与资源模块无需 Loader，CSS 与 HTML 已有实验性内置支持，预处理器与模板引擎仍依赖各自 Loader。

Plugin：webpack 自身的大部分功能都基于插件接口实现，这也是它灵活性的来源。常见插件可用于压缩资源、生成 HTML、提取 CSS 等。

浏览器兼容性

webpack 支持所有符合 ES5 规范的浏览器（不支持 IE8 及以下）。使用 import() 与 require.ensure() 时需要 Promise，如需兼容更老的浏览器，应在使用前加载 polyfill。

上手建议

官方提供了 Get Started 指南与一系列专题文档，建议从最小配置开始，逐步引入 Loader 与插件，避免一次性堆叠过多配置导致难以维护。