中文文档参与贡献投票博客

English
中文
한국어

API 概念配置指南 loader 迁移 plugin

webpack

api

简介命令行接口（CLI）Node 接口 Stats Data webpack-dev-server API Hot Module Replacement Loader Interface Logger 接口模块方法 Module Variables Compilation Object compiler 钩子 compilation 钩子 ContextModuleFactory Hooks JavascriptParser Hooks NormalModuleFactory Hooks Plugin API 解析器（Resolvers）

blog

Blog Roadmap 2021 (2020-12-08)Webpack 5 发布 (2020-10-10)

概念

概念入口起点(entry points)输出(output)loader plugin 配置（Configuration）模块（Modules）模块解析（Module Resolution）Module Federation 依赖图(dependency graph)target manifest 模块热替换(hot module replacement)为什么选择 webpack 揭示内部原理

配置

配置 Configuration Languages Configuration Types 入口和上下文模式(Mode)Output Module 解析(Resolve)优化(Optimization)插件(Plugins)DevServer Cache Devtool 构建目标(Targets)watch 和 watchOptions 外部扩展(Externals)Performance Node Stats 对象实验特性(Experiments)其它选项

contribute

参与贡献作者指引编写 loader 自定义插件插件模式发布流程调试

指南

指南起步管理资源管理输出开发环境代码分离缓存创建库环境变量构建性能内容安全策略开发 - Vagrant 依赖管理安装模块热替换 Tree Shaking 生产环境懒加载 ECMAScript 模块 Shimming 预置依赖 TypeScript Web Workers 渐进式网络应用程序公共路径集成资源模块 entry 高级用法 Package exports

loader

Loaders babel-loader coffee-loader css-loader exports-loader expose-loader html-loader imports-loader less-loader node-loader postcss-loader pug-loader remark-loader sass-loader source-map-loader style-loader stylus-loader thread-loader val-loader

迁移

Migrate 从 v4 升级到 v5 To v4 from v3 从 v1 升级到 v2 或 v3

plugin

插件 HtmlWebpackPlugin AutomaticPrefetchPlugin BannerPlugin CommonsChunkPlugin ContextExclusionPlugin ContextReplacementPlugin DefinePlugin DllPlugin EnvironmentPlugin EvalSourceMapDevToolPlugin HashedModuleIdsPlugin HotModuleReplacementPlugin IgnorePlugin Internal webpack plugins LimitChunkCountPlugin MinChunkSizePlugin ModuleConcatenationPlugin ModuleFederationPlugin NoEmitOnErrorsPlugin NormalModuleReplacementPlugin PrefetchPlugin ProfilingPlugin ProgressPlugin ProvidePlugin SourceMapDevToolPlugin SplitChunksPlugin WatchIgnorePlugin CompressionWebpackPlugin CopyWebpackPlugin CssMinimizerWebpackPlugin EslintWebpackPlugin HtmlMinimizerWebpackPlugin ImageMinimizerWebpackPlugin InstallWebpackPlugin JsonMinimizerWebpackPlugin MiniCssExtractPlugin StylelintWebpackPlugin TerserWebpackPlugin

Comparison

Awesome webpack

品牌指南

术语表

遵循许可

入口(entry)
输出(output)
loader
插件(plugin)
模式(mode)
浏览器兼容性(browser compatibility)
环境(environment)

入口起点(entry points)

单个入口（简写）语法
对象语法
- 描述入口的对象
常见场景
- 分离 app(应用程序) 和 vendor(第三方库) 入口
- 多页面应用程序

用法
多个入口起点
高级进阶

示例
使用 loader
- Configuration
- 内联方式
loader 特性
解析 loader

剖析
用法
- 配置方式
- Node API 方式

配置（Configuration）

基本配置
多个 target
使用其它配置语言

模块（Modules）

何为 webpack 模块
支持的模块类型

模块解析（Module Resolution）

webpack 中的解析规则
解析 loader
缓存

Module Federation

动机
底层概念
高级概念
构建块(Building blocks)
概念目标
用例
- 每个页面单独构建
- 将组件库作为容器
动态远程容器
基于 Promise 的动态 Remote
动态 Public Path
- 提供一个 host api 以设置 publicPath
- Infer publicPath from script
故障排除

依赖图(dependency graph)

用法
多 target
资源

runtime
manifest
问题

模块热替换(hot module replacement)

这一切是如何运行的？
起步

为什么选择 webpack

立即调用函数表达式(IIFE) - Immediately invoked function expressions
感谢 Node.js，JavaScript 模块诞生了
npm + Node.js + modules - 大规模分发模块
ESM - ECMAScript 模块
依赖自动收集
看起来都不是很好……

揭示内部原理

主要部分
chunk
output(输出)

入口起点(entry points)

编辑此页·打印文档

« Previous

Next »

快速开始对比 Privacy Policy

周边 Awesome webpack 术语品牌 Gitter 更新日志