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
Webpack 教程

Webpack 教程


阅读(101.8k) 收藏 赞(1)

手册简介

现代JavaScript应用程序的打包工具

手册说明

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

Tip：
可以在 这里 了解更多关于 JavaScript 模块和 webpack 模块的信息。

从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着 高度可配置性，可以很好满足你的需求。

在开始前你需要先理解一些核心概念：

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

本文档旨在给出这些概念的高度概述，同时提供具体概念的详尽相关用例的链接。

为了更好地理解模块打包工具背后的理念，以及在底层它们是如何运作的，请参考以下资源：


更新记录

多端阅读

返回w3cschool官网主页

扩展栏目

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号