webpack
webpack 是前端最主流的模块打包器，可将 JavaScript、CSS、图片、JSON 等各类资源打包成少量产物，支持代码分割、Loader 预处理与插件扩展，是构建现代 Web 应用的核心工具。
爱鲜报评分
0.0
0 人评分
开源 · MIT
#JavaScript
#前端工程化
#webpack
#构建工具
#模块打包
66k
星数
否
中文
JavaScript
主语言
是
活跃
996
贡献者
人工分析
EDITORIAL推荐理由
前端工程化绕不开的基础设施，生态成熟、文档完善、社区庞大，几乎所有主流框架脚手架都基于它。适合需要精细控制打包产物、做代码分割与资源优化的团队。虽然上手配置有一定门槛，但长期维护性与可扩展性极强。
适用场景
- 前端项目构建与打包
- 代码分割与按需加载
- 多类型静态资源处理
- 自定义构建流程与插件开发
- 老项目构建体系维护
优点
- 生态成熟，Loader 与插件极其丰富
- 支持 ES Modules、CommonJS、AMD 等多种模块规范
- 代码分割能力强，可显著优化首屏加载
- 配置灵活，可深度定制构建流程
- 社区活跃，文档与教程资源充足
缺点
- 配置文件复杂，新手学习曲线较陡
- 大型项目构建速度相对偏慢
- 配置项繁多，容易产生维护负担
- 原生 CSS/HTML 支持仍属实验性
上手难度
进阶
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 与插件，避免一次性堆叠过多配置导致难以维护。
评论
- 暂无评论，来写第一条吧。