Webpack 教程
Webpack 教程
  1. 概念
    1. 前言
    2. Webpack 入口起点(entry points)
    3. Webpack 输出(output)
    4. Webpack Loader
    5. Webpack Plugin
    6. Webpack 配置(Configuration)
    7. Webpack 模块(Modules)
    8. Webpack 模块解析(Module Resolution)
    9. Webpack 模块联邦(Module Federation)
    10. Webpack 依赖图(dependency graph)
    11. Webpack target
    12. Webpack manifest
    13. Webpack 模块热替换(hot module replacement)
    14. 为什么选择 webpack
    15. 揭示 Webpack 内部原理
  2. 指南
    1. 前言
    2. Webpack 起步
    3. Webpack 管理资源
    4. Webpack 管理输出
    5. Webpack 开发环境
    6. Webpack 代码分离
    7. Webpack 缓存
    8. Webpack 创建 library
    9. Webpack 环境变量
    10. Webpack 构建性能
    11. Webpack 内容安全策略
    12. Webpack 开发 - Vagrant
    13. Webpack 依赖管理
    14. Webpack 安装
    15. Webpack 模块热替换
    16. Webpack Tree Shaking
    17. Webpack 生产环境
    18. Webpack 懒加载
    19. Webpack ECMAScript 模块
    20. Webpack Shimming 预置依赖
    21. Webpack TypeScript
    22. Webpack Web Workers
    23. Webpack 渐进式网络应用程序
    24. Webpack 公共路径
    25. Webpack 集成
    26. Webpack 资源模块
    27. Webpack entry 高级用法
    28. Webpack Package exports
  3. 配置
    1. 前言
    2. Webpack Configuration Languages
    3. Webpack Configuration Types
    4. Webpack 入口和上下文
    5. Webpack Mode(模式)
    6. Webpack Output(输出)
    7. Webpack Module(模块)
    8. Webpack Resolve(解析)
    9. Webpack Optimization(优化)
    10. Webpack Plugins(插件)
    11. Webpack DevServer
    12. Webpack Cache
    13. Webpack Devtool
    14. Webpack 构建目标(Targets)
    15. Webpack watch 和 watchOptions
    16. Webpack 外部扩展(Externals)
    17. Webpack Performance
    18. Webpack Node
    19. Webpack Stats 对象
    20. Webpack 实验特性(Experiments)
    21. Webpack 其它选项
  4. Loader
    1. 前言
    2. Webpack babel-loader
    3. Webpack coffee-loader
    4. Webpack css-loader
    5. Webpack exports-loader
    6. Webpack expose-loader
    7. Webpack html-loader
    8. Webpack imports-loader
    9. Webpack less-loader
    10. Webpack node-loader
    11. Webpack postcss-loader
    12. webpack remark-loader
    13. Webpack sass-loader
    14. Webpack source-map-loader
    15. Webpack style-loader
    16. Webpack stylus-loader
    17. Webpack thread-loader
    18. Webpack val-loader
  5. Plugin
    1. Webpack插件
    2. Community
      1. HtmlWebpackPlugin
    3. Webpack
      1. AutomaticPrefetchPlugin
      2. BannerPlugin
      3. CommonsChunkPlugin
      4. ContextExclusionPlugin
      5. ContextReplacementPlugin
      6. DefinePlugin
      7. DllPlugin
      8. EnvironmentPlugin
      9. EvalSourceMapDevToolPlugin
      10. HashedModuleIdsPlugin
      11. HotModuleReplacementPlugin
      12. IgnorePlugin
      13. Internal webpack plugins
      14. LimitChunkCountPlugin
      15. MinChunkSizePlugin
      16. ModuleConcatenationPlugin
      17. ModuleFederationPlugin
      18. NoEmitOnErrorsPlugin
      19. NormalModuleReplacementPlugin
      20. PrefetchPlugin
      21. ProfilingPlugin
      22. ProgressPlugin
      23. ProvidePlugin
      24. SourceMapDevToolPlugin
      25. SplitChunksPlugin
      26. WatchIgnorePlugin
  6. API
    1. Webpack：命令行接口（CLI）
    2. Webpack：Node 接口
    3. Webpack：Stats Data
    4. Webpack-dev-server API
    5. Webpack：Hot Module Replacement
    6. Webpack：Loader Interface
    7. Webpack：Logger 接口
    8. Webpack Modules
      1. Webpack：模块方法
      2. Webpack：模块变量
    9. Webpack Objects
      1. Webpack：Compilation Object
    10. Webpack Plugins
      1. Webpack：compiler 钩子
      2. Webpack：compilation 钩子
      3. Webpack：ContextModuleFactory Hooks
      4. Webpack：JavascriptParser Hooks
      5. Webpack：NormalModuleFactory Hooks
      6. Webpack：Plugin API
      7. Webpack：解析器（Resolvers）
  7. 迁移
    1. 前言
    2. Webpack：从 v4 升级到 v5
      1. 准备工作
      2. 清理配置
      3. 清理代码
      4. 后续工作
    3. Webpack：从 v3 升级到 v4
    4. Webpack：从 v1 升级到 v2 或 v3
阅读(629) 书签 赞(0) 我要纠错

Webpack插件

2023-05-22 09:56 更新

Webpack 拥有丰富的插件接口。webpack 自身的大部分功能都使用这些插件接口。这使得 webpack 很灵活。

插件 描述
BannerPlugin 为每个 chunk 文件头部添加 banner
CommonsChunkPlugin 提取 chunk 之间的公共模块用以共享
CompressionWebpackPlugin 准备好用 Content-Encoding 格式传送的压缩版资源包
ContextReplacementPlugin 重写 require 表达式的推断上下文
CopyWebpackPlugin 复制某个文件或整个文件夹到生成目录中
DefinePlugin 允许创建一个在编译时可配置的全局常量
DllPlugin 拆分 bundles，从而大幅减少构建时间
EnvironmentPlugin 在 process.env 键上使用 ​DefinePlugin​ 的简写方式
EslintWebpackPlugin webpack 的 ESLint 插件
HotModuleReplacementPlugin 启用热更新 (HMR)
HtmlWebpackPlugin 快速创建 HTML 文件来服务 bundles
IgnorePlugin 从 bundles 包中移除某些模块
LimitChunkCountPlugin 设置 chunk 的最小/最大限制，以便更好的控制 chunk
MinChunkSizePlugin 确保 chunk 大小在指定限制之上
MiniCssExtractPlugin 为每一个包含了 CSS 的 JS 文件创建一个 CSS 文件
NoEmitOnErrorsPlugin 出现编译错误时，跳过输出阶段
NormalModuleReplacementPlugin 替换与正则表达式匹配的资源
NpmInstallWebpackPlugin 开发时自动安装缺少的依赖
ProgressPlugin 报告编译进度
ProvidePlugin 使用模块但无需使用 import/require
SourceMapDevToolPlugin 对 source map 进行更细颗粒度的控制
EvalSourceMapDevToolPlugin 对 eval source map 进行更细颗粒度的控制
TerserPlugin 在你的项目中使用 Terser 插件来压缩 JS

查找更多第三方插件，请参阅 awesome-webpack。


以上内容是否对您有帮助：
← Webpack val-loader
HtmlWebpackPlugin →
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号