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

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

品牌指南

术语表

遵循许可

基本安装
创建一个 bundle
模块
使用配置文件
npm scripts
总结

设置
加载 CSS
加载图像
加载字体
加载数据
- 自定义 JSON 模块解析器
全局资源
回退处理
下篇指南
延伸阅读

预先准备
设置 HtmlWebpackPlugin
清理 /dist 文件夹
manifest
总结

使用 source map
选择一个开发工具
调整文本编辑器
总结

入口起点
防止重复
- 入口依赖
- SplitChunksPlugin
动态导入
预获取/预加载模块
bundle 分析
下一步

输出文件的文件名
提取引导模板
模块标识符
总结

创建一个库
webpack 配置
暴露库
外部化 lodash
- 外部化的限制
最终步骤

通用环境
开发环境
生产环境
- Source Maps
工具相关问题

内容安全策略

示例
启用 CSP
Trusted Types

开发 - Vagrant

配置项目
启动服务器
配合 nginx 的高级用法
结论

带表达式的 require 语句
require.context
- context module API

前提条件
本地安装
全局安装
最新体验版本

模块热替换

启用 HMR
通过 Node.js API
问题
HMR 加载样式
其他代码和框架

添加一个通用模块
将文件标记为 side-effect-free(无副作用)
解释 tree shaking 和 sideEffects
将函数调用标记为无副作用
压缩输出结果
结论

配置
NPM Scripts
指定 mode
压缩(Minification)
源码映射(Source Mapping)
压缩 CSS
CLI 替代选项

示例
框架

ECMAScript 模块

导出
导入
将模块标记为 ESM

Shimming 预置依赖

Shimming 预置全局变量
细粒度 Shimming
全局 Exports
加载 Polyfills
进一步优化
Node 内置
其他工具

基础配置
loader
source map
客户端类型
使用第三方库
导入其他资源
构建性能

语法
示例
Node.js

渐进式网络应用程序

现在，我们并没有运行在离线环境下
添加 Workbox
注册 Service Worker
结论

示例

NPM Scripts
Grunt
Gulp
Mocha
Karma

Resource 资源
- 自定义输出文件名
inline 资源(inlining asset)
- 自定义 data URI 生成器
source 资源(source asset)
URL 资源
通用资源类型
变更内联 loader 的语法
Disable emitting assets

entry 高级用法

每个入口使用多种文件类型

Package exports

General syntax
Alternatives
Conditional syntax
Abbreviation
Notes about ordering
Support
Conditions
Common patterns
Guidelines

开发环境

编辑此页·打印文档

« Previous

Next »

快速开始对比 Privacy Policy

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