翻译/文档内容有任何问题，请联系我们

Printable

webpack

编写代码

src/index.js

import bar from './bar.js';

bar();

src/bar.js

export default function bar() {
  //
}

构建

不使用配置 或提供自定义的 webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

page.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    ...
  </head>
  <body>
    ...
    <script src="dist/bundle.js"></script>
  </body>
</html>

在控制台运行 webpack 命令，生成 bundle.js。

深入学习

快速开始部分在指南章节，如果有兴趣深入学习，可以查阅 概念 章节，以了解 webpack 的核心概念以及底层实现。

Comparison

webpack 并非唯一的模块打包工具。当你面临选择 webpack 或者是其他模块打包工具时，请参见以下 webpack 与其他竞品的功能对比表格。

特性webpack/webpackjrburke/requirejssubstack/node-browserifyjspm/jspm-clirollup/rollupbrunch/brunch
按需加载额外 chunksyesyesnoSystem.importnono
AMD defineyesyesdeamdifyyesrollup-plugin-amdyes
AMD requireyesyesnoyesnoyes
AMD require 按需加载yes手动配置noyesnono
CommonJS exportsyes仅包裹在 define 中yesyescommonjs-pluginyes
CommonJS requireyes仅包裹在 define 中yesyescommonjs-pluginyes
CommonJS require.resolveyesnononono-
在 require 中使用拼接 require("./fi" + "le")yesno♦nonono-
调试支持SourceUrl, SourceMaps未引入SourceMapsSourceUrl, SourceMapsSourceUrl, SourceMapsSourceMaps
依赖列表（Dependencies）19MB / 127 个 package11MB / 118 个 package1.2MB / 1 package26MB / 131 个 package?MB / 3 个 package-
ES2015 import/exportyes (webpack 2)nonoyesyesyes，通过 es6 module 转译器
require 中使用表达式 (guided) require("./templates/" + template)yes（包含所有匹配到的文件）no♦nononono
require 中使用表达式 (free) require(moduleName)手动配置no♦nonono-
生成单文件 bundleyesyes♦yesyesyesyes
间接 require var r = require; r("./file")yesno♦nonono-
单独加载某个文件noyesnoyesnono
混淆路径名称yesno部分yes未引入（路径名称未包含在 bundle 中）no
压缩Terseruglify, closure compileruglifyifyyesuglify-pluginUglifyJS-brunch
使用 common bundle 构建多页应用手动配置yes手动配置使用 bundle 算法nono
多个 bundleyes手动配置手动配置yesnoyes
Node.js 内置库 require("path")yesnoyesyesnode-resolve-plugin-
其他 Node.js 相关内容process，__dir/filename，global-process，__dir/filename，globalprocess，__dir/filename，global for cjsglobal (commonjs-plugin)-
Pluginyesyesyesyesyesyes
预处理loadersloaderstransformsplugin translateplugin transformscompilers，optimizers
浏览器替换项web_modules，.web.js，package.json 字段，别名（alias）配置项别名配置项package.json 字段，别名配置项package.json，别名配置项no-
读取文件文件系统web文件系统使用插件文件系统或者使用插件文件系统
运行时开销每个模块 243B + 20B + 每个依赖 4B每个模块 14.7kB + 0B + 每个依赖 (3B + X)每个模块 415B + 25B + 每个依赖 (6B + 2X)自运行 bundle 5.5kB，所有 loader 和 polyfill 38kB，普通模块 0，293B CJS，ES2015 System.register 压缩 (gzip) 前 139BES2015 module 无开销 （其他格式可能会有）-
监听模式yes未引入watchifydev 中未引入rollup-watchyes

♦ 为生成模式 (开发模式取反值)

X 为路径字符串的长度

打包与加载

了解 loading 和 bundling 模块的一些主要区别是很有必要的。比如像 SystemJS 这类的工具，本质上是基于 JSPM, 常应用于在浏览器运行时加载和转译模块。这就与 webpack 有很大的差异，因为在 webpack 中模块是在浏览器加载之前，就已经被转译过（通过 loaders 转译）并打包的。

每种方法都有其长，也有其短。如果是包括较多模块的大型网站和应用程序，在运行时加载和转译模块，会使其增加许多开销。故而，SystemJS 更加适用于模块较少的小型项目。不过，在判定哪些文件可以从服务端转到客户端时，HTTP/2 倒是能提升一些速度。请注意，HTTP/2 并不会改变 transpiling 模块，所以在客户端会增加时间开销。

Awesome webpack

A curated list of awesome webpack resources, libraries, tools and applications. It is inspired by the awesome list. Feel free to improve this list by contributing.

Webpack Ecosystem

Remember to Cast your vote for upcoming Webpack features!

Support Webpack

Community

Twitter

People passionate about Webpack (In no particular order)

Libraries

Loaders

File Type

  • HTML Loader: HTML loader module for Webpack. -- Maintainer: Webpack Team Github
  • Responsive Loader: Loader for responsive images. -- Maintainer: Jeremy Stucki Github
  • SVG Url Loader: Loader which loads SVG file as utf-8 encoded Url. -- Maintainer: Hovhannes Babayan Github
  • mermaid Loader: mermaid loader module (diagrams) for Webpack. -- Maintainer: Paul Musso Github
  • wasm loader: wasm binary loader module for Webpack. -- Maintainer: Arthur Buldauskas Github
  • Imagemin Loader/Plugin: Image minimizing loader + plugin for webpack. -- Maintainer: itgalaxy inc. Github
  • Bin Exec Loader: Pipe any file through any binary. -- Maintainer: Rafael Milewski Github
  • GraphQL Loader: .graphql document loader. -- Maintainer: Stephen Wan Github

Component & Template

  • Angular2 Template Loader: Inlines html and style's in Angular2 components. -- Maintainer: Sean Larkin Github Twitter
  • Handlebars Loader: A handlebars template loader for Webpack. -- Maintainer: Paul Carduner Github Twitter
  • Vue Loader: Webpack loader for Vue.js components. -- Maintainer: Vuejs Team Github Twitter
  • SVG React Loader - Webpack SVG to React Component Loader. -- Maintainer: Jerry Hamlet Github Twitter
  • Underscore Loader - Underscore and Lodash template loader. -- Maintainer: Emmanuel Antico Github Twitter
  • ngTemplate Loader - Angular1 Template Loader. -- Maintainer: Toby Rahilly Github
  • ngInlineStylesLoader: Optimizes inlined css of angular components. -- Maintainer: Severin Friede Github
  • Markup-inline Loader Inline SVGs to HTML -- Maintainer: Zhicheng Wang Github
  • Polymer Loader - Loader for Polymer elements. -- Maintainers: Rob Dodson Github - Chad Killingsworth Github - Bryan Coulter Github
  • Tag Loader - Loader for Riot tag files. -- Maintainer: Riot Team Github Twitter
  • Twig Loader - Twig template loader. -- Maintainer: Zimmo.be Team Github
  • Auto ngTemplate Loader: Autodetect Angular 1 templates and load them. -- Maintainer: Yash Kulshrestha Github
  • Pug Loader - Pug template loader (formerly Jade). -- Maintainer: Pug Team Github
  • Simple Nunjucks Loader - Nunjucks template loader. -- Maintainer: ogonkov Github

Styles

  • Style Loader: Style loader module for Webpack. -- Maintainer: Webpack Team Github
  • PostCSS Loader: PostCSS loader for Webpack. -- Maintainer: PostCSS Team Github Twitter
  • CSS Loader: CSS loader module for Webpack. -- Maintainer: Webpack Team Github
  • SASS Loader: SASS loader for Webpack. -- Maintainer: Jorik Tangelder Github Twitter
  • Less Loader: Less loader module for Webpack. -- Maintainer: Webpack Team Github
  • Stylus Loader: A stylus loader for webpack. -- Maintainer: Kyle Robinson Young Github Twitter
  • Isomorphic Style Loader: Isomorphic CSS style loader for Webpack. -- Maintainer: Kriasoft Team Github Twitter
  • Minify CSS-in-JS Loader: RegExp-based minify CSS-in-JS loader for Webpack, don't need babel. -- Maintainer: Zack Young Github Twitter
  • SASS Resources Loader: Globally import SASS resources (variables, mixins, etc.). -- Maintainer: ShakaCode Github Twitter

Language & Framework

  • TS Loader: TypeScript loader for webpack. -- Maintainer: TypeStrong Team Github
  • Coffee Loader: Coffee loader module for Webpack. -- Maintainer: Webpack Team Github
  • Bootstrap Loader: Load Bootstrap styles in your Webpack bundle. -- Maintainer: ShakaCode Team Github Twitter
  • PostHTML Loader: PostHTML loader for Webpack. -- Maintainer: PostHTML Team Github Twitter
  • ELM Loader: Webpack loader for the Elm programming language. -- Maintainer: Richard Feldman Github Twitter
  • Fengari Loader: Run Lua code using Fengari. -- Maintainer: Daurnimator Github Twitter

Utility

  • Babel Loader: Webpack plugin for Babel. -- Maintainer: Babel Team Github Twitter
  • Worker Loader: Worker loader module for Webpack. -- Maintainer: Webpack Team Github
  • Resolve URL Loader: Resolves relative paths in url() statements. -- Maintainer: Ben Holloway Github
  • Import Loader: Imports loader module for Webpack. -- Maintainer: Webpack Team Github
  • SourceMap Loader: Extract sourceMappingURL comments from modules. -- Maintainer: Webpack Team Github
  • Combine Loader - Converts a loaders array into a single loader string. -- Maintainer: James Friend Github
  • Icon Font Loader - Converts svgs into font icons in CSS. -- Maintainer: Forrest R. Zhao Github
  • Icons Loader - Generates an iconfont from SVG dependencies. -- Maintainer: Mike Vercoelen Github
  • Modernizr Loader - Get your modernizr build bundled with webpack. -- Maintainer: Peerigon Devs Github
  • ngRouter Loader - AOT capable NgModule lazy loading using angular router -- Maintainer: Shlomi Assaf Github Twitter
  • Lingui Loader - Compile message catalogs on the fly for jsLingui, i18n library -- Maintainer: Tomáš Ehrlich Github Twitter
  • Shell Loader - Run an arbitrary shell script on source files. -- Maintainer: Jo Sprague Github
  • EXIF Loader - Extract EXIF- & IPTC-data from your JPGs during build-time. -- Maintainer: Emanuel Kluge Github Twitter
  • esbuild Loader - Blazing fast alternative to babel-loader, ts-loader, and Terser powered by esbuild. -- Maintainer: Hiroki Osame Github Twitter

Testing

Integration Libraries

  • Dotenv Webpack: Compiles environment variables into your bundle via dotenv. -- Maintainer: Matthew Steele Github Twitter
  • Terse Webpack - Webpack simplified in a fluent API with presets. -- Maintainer: Eric Clemmons Github Twitter
  • SystemJS Webpack - Webpack bundling for SystemJS. -- Maintainer: Guy Bedford Github Twitter
  • Gulp Webpack Stream - Run webpack through a stream interface. -- Maintainer: Kyle Robinson Young Github Twitter
  • Webpack Blocks - Configure webpack using functional feature blocks. -- Maintainer: Andy Wermke Github Twitter
  • Webpacker - Official webpack gem for integration into ruby on rails projects. -- Maintainer: Rails Github
  • WebpackAspnetMiddleware - Development middleware for ASP.NET 5. -- Maintainer: Frank Wallis Github
  • Consul Key/Value Webpack: Compiles environment variables into your bundle via Consul KV-store. -- Maintainer: Marlon Maxwel Github

Webpack Plugins

  • DefinePlugin: Create global constants which can be configured at compile time. -- Maintainer: Webpack Team Github
  • Compression Plugin: Prepare assets to serve with Content-Encoding. -- Maintainer: Webpack Team Github
  • Offline Plugin: Offline plugin (ServiceWorker, AppCache) for Webpack. -- Maintainer: Arthur Stolyar Github Twitter
  • Rewire Plugin: Dependency injection for Webpack bundles. -- Maintainer: Johannes Ewald Github Twitter
  • HTML Webpack Plugin: Simplifies creation of HTML files. -- Maintainer: Jan Nicklas Github Twitter
  • Copy Webpack Plugin: Copy files and directories in webpack. -- Maintainer: Len Boyette Github Twitter
  • Split By Path: Split By Path Webpack Plugin. -- Maintainer: Bohdan Tkachenko Github Twitter
  • SW Precache - Generates a service worker to precache bundle. -- Maintainer: Will Farley Github
  • CoreJS Plugin - Core-JS as a webpack plugin. -- Maintainer: PatrickJS Github
  • Bundle Analyzer - Utility that represents bundles as an interactive treemap. -- Maintainer: Yuriy Grunin Github
  • Module Mapping - Maps modules onto different files. -- Maintainer: Spartez Team Github Twitter
  • Serverless Webpack - Serverless plugin to bundle your lambdas. -- Maintainer: Elastic Coders Github Twitter
  • Prerender SPA - Framework-agnostic static site generation for SPAs. -- Maintainer: Chris Fritz Github Twitter
  • Static Site Generator Plugin - Minimal, unopinionated static site generator. -- Maintainer: Mark Dalgleish Github
  • SVG Sprite Plugin - Plugin for SVG sprites and icons. -- Maintainer: Jeremy Tice (TodayTix) Github Twitter
  • Imagemin Webpack Plugin - Minify images with Imagemin. -- Maintainer: Gregory Benner Github Twitter
  • Prepack Webpack Plugin - A webpack plugin for prepack. -- Maintainer: Gajus Kuizinas Github
  • Modules CDN Webpack Plugin - Dynamically load your modules from a CDN. -- Maintainer: Thomas Sileghem Github
  • Generate package.json Plugin - Limit dependencies in a deployment package.json to only those that are actually being used by your bundle. -- Maintainer: Paul Myburgh Github
  • Progressive Web App Manifest - PWA manifest manager and generator. -- Maintainer: Arthur A. Bergamaschi Github
  • FileManager Webpack Plugin - Copy, move, delete files and directories before and after Webpack builds -- Maintainer: Gregory Nowakowski Github
  • Fork TS Checker Webpack Plugin - Webpack plugin that runs typescript type checker on a separate process. -- Maintainer: TypeStrong Team Github
  • Duplicate Package Checker Webpack Plugin - Warns you when multiple versions of the same package exist in your bundle -- Maintainer: Darren Scerri Github
  • Circular Dependency Plugin - Detect modules with circular dependencies when bundling -- Maintainer: Aaron Ackerman Github
  • webpack-inject-plugin - A webpack plugin to dynamically inject code into the bundle. -- Maintainer: Adam Dierkens Github
  • Public Path Manipulation Plugin - control publicPath of dynamically loaded resources at runtime -- Maintainer: Andrew Goldis Github
  • Build Notifier Plugin - Display OS-level notifications for build errors and warnings. -- Maintainer: Rocco Cataldo Github
  • CSS Cleanup Webpack Plugin - A plugin to remove duplicated and unused css rules -- Maintainer: Dominik Weber Github
  • Extension Reloader - Hot reloading while developing browser extensions -- Maintainer: Rubens P. G. Cavalcante Github Twitter
  • Htmls Webpack Plugin: Simple and fast multiple-htmls-generating plugin for webpack. -- Maintainer: Zack Young Github Twitter
  • Mini css extract plugin: Lightweight CSS extraction plugin -- Maintainer: Webpack Contrib Github
  • build-hash-webpack-plugin For each build, Webpack generates an in-memory hash allowing to know if two build outputs are the same or not. This plugin writes the described build hash in a separate json file. -- Maintainer: Réda Housni Alaoui Github Twitter
  • webpack-hook-plugin - run any shell commands before or after webpack builds -- Maintainer: David Kwon Github
  • Dynamic Vendor Webpack Plugin - Gives you a way to import vendors with dynamic variable and specific code splitting. -- Maintainer Lilian Saget-Lethias Github Twitter
  • Define Variable Webpack Plugin - Enhancement of DefinePlugin to store defined things in actual variables. -- Maintainer Lilian Saget-Lethias Github Twitter
  • Shell Script Webpack Plugin - A plugin for running arbitrary shell scripts when compiler hooks are triggered. -- Maintainer Drew Loomer Github Twitter
  • Stylelint Webpack Plugin: A Stylelint plugin for webpack. -- Maintainer: Ricardo Gobbo de Souza Github
  • ESLint Webpack Plugin: A ESLint plugin for webpack . -- Maintainer: Ricardo Gobbo de Souza Github
  • Exclude Assets Webpack Plugin: A plugin to exclude assets from webpack output based on a path RegExp pattern. -- Maintainer: Klayton Faria Github
  • Webpack Shell Plugin Next: A plugin allows you to run any shell commands before or after webpack builds. -- Maintainer: Kuzmin Pavel Github
  • Gettext Webpack Plugin: Embed localization into your bundle using gettext. -- Maintainer: Juan Luis Paz Github
  • Node Polyfill Plugin: Polyfill Node.js core modules. -- Maintainer: Richie Bendall Github Twitter
  • Bytenode Plugin: Compile JavaScript into bytecode using bytenode. -- Maintainer: Herbert Treis Neto Github
  • Chrome Extension Archive Webpack Plugin Create archive file to publish Chrome Exentions to Chrome Web Store -- Maintainer: KeisukeYamashita Github
  • Layer-pack Webpack Plugin Allow to glob imports file & directories, build mono repo apps via inheritable source code / npm packages & share webpack configs -- Maintainer: Braun Nathanaël Github
  • webpack-typescript-directory-compile-plugin Configure an source directory of typescript files and an output directory for JavaScript files. Each typescript file in the source directory and any newly added files will be compiled to individual JavaScript files. -- Maintainer: Stephen Sigwart Github
  • CycloneDX Webpack Plugin: Create CycloneDX Software Bill of Materials (SBOM) from webpack bundles at compile time. -- Maintainer: OWASP CycloneDX Team Github

Webpack Tools

  • Webpack Dev Middleware: Middleware which arguments a live bundle. -- Maintainer: Webpack Team Github
  • Webpack Dev Server: Serves a webpack app. Updates the browser on changes. -- Maintainer: Webpack Team Github
  • Webpack Merge - Merge designed for Webpack. -- Maintainer: Juho Vepsäläinen Github Twitter
  • NPM Install Webpack - Automatically install & save deps with Webpack. -- Maintainer: Eric Clemmons Github Twitter
  • Webpack Validator - Validates your webpack config with Joi. -- Maintainer: js-dxtools Team Github
  • Webpack Config Utils - Util. to make your webpack config easier to read. -- Maintainer: Kent C. Dodds Github Twitter
  • Angular2 Webpack Toolkit - Webpack tools and helpers for Angular 2. -- Maintainer: AngularClass Github Twitter
  • Webpack Bundle Analyzer - Represents bundles as an interactive treemap. -- Maintainer: Yuriy Grunin Github Twitter
  • HJS Webpack: Helpers/presets for setting up webpack with hotloading. -- Maintainer: Henrik Joreteg Github
  • Webpack Dashboard: A CLI dashboard for webpack dev server. -- Maintainer: Formidable Labs Github
  • Neutrino: Combines the power of Webpack with the simplicity of presets. -- Maintainer: Eli Perelman Github
  • Speed Measure Plugin - Measures the speed of your webpack plugins and loaders. -- Maintainer: Stephen Cook Github
  • packtracker.io - Webpack bundle analysis on every commit, report webpack stats to every pull request.
  • BundleStats: Analyze webpack stats(bundle size, assets, modules, packages) and compare the results between different builds. -- Maintainer: Vio Github Twitter
  • Webpack Landing Generator: Easy way to create landing page that converts. -- Maintainer: Aliaksei Kuncevic Github Twitter
  • Webpack Dev Server Firewall: Prevents access to dev server from unknown IPs. -- Maintainer: Igor Adamenko Github Twitter
  • RelativeCI: Run in-depth bundle analyses on every build and monitor webpack bundle size, assets, modules, and packages. Github

Research & Training

Articles

Videos

Courses

Books

  • SurviveJS - Webpack: Free book guiding from a webpack apprentice to master. Covers dev, prod, and advanced topics.

Webpack Examples

Community Examples

Angular

Framework Agnostic

React

Vue

Other

品牌指南

在这里你可以找到 webpack 项目的品牌指南、资源和许可证。有关更多信息，请通过查看我们的官方媒体仓库，并找到许可证来了解。点击任意图片下载它们。

名称

Webpack 在句子的开头可以是大写字母 W，否则它应该全部为小写。

Logo

webpack logo 应放置在白色背景上，并且其周围有足够间距，如下所示:

webpack logo default with proper spacing on light background

svg | png | jpg

将内部深蓝色正方体的大小加倍，就可以知道 logo 应占据多大空间。

对于深色背景，可以使用 logo 的反色版本：

webpack logo default with proper spacing on light background

svg | png | jpg

只包含图标

图标旨在用于布局有限的区域。如前所述，最好选择 图标+文字 的组合方式。

icon example

svg | png | jpg

适用于较大区域的正方形尺寸图标（例如头像或个人图片）：

icon square big example

svg | png | jpg

适用于较小区域的正方形尺寸图标（例如，favicon）：

icon square small example

svg | png | jpg

icon square small example

调色板

在 Open Collective 和 Threadless 的帮助下，以下颜色在我们整个网站中被以各种组合形式使用，并且在 webpack 官方商城 推出的时尚服装系列中也用了这些颜色！

颜色名称HEX 码RGB 码示例
Malibu:HEX #8dd6f9rgb: 141, 214, 249
 
Denim:HEX #1d78c1rgb: 29, 120, 193
 
Fiord:HEX #465E69rgb: 70, 94, 105
 
Outer Space:HEX #2B3A42rgb: 43, 58, 66
 
White:HEX #ffffffrgb: 255, 255, 255
 
Concrete:HEX #f2f2f2rgb: 242, 242, 242
 
Alto:HEX #dededergb: 222, 222, 222
 
Dusty Gray:HEX #999999rgb: 153, 153, 153
 
Dove Gray:HEX #666666rgb: 102, 102, 102
 
Emperor:HEX #535353rgb: 83, 83, 83
 
Mine Shaft:HEX #333333rgb: 51, 51, 51
 

此外，你可以直接从下面的链接，获取这些类型的文件：

psd | png | ai | svg

许可证

logo 和品牌名称并不遵循 MIT 许可。请查看我们的许可证页面，以获取使用指南。

术语表

该索引列出了整个 webpack 生态系统中的常用术语。

A

  • Asset: 资源是对图像、字体、媒体和任何其他类型文件的统称，通常用于网站和其他应用程序中。这些文件通常在 output 中最终输出为单独的文件，但也可以通过诸如 style-loader 或 url-loader之类的方法内联。

B

  • Bundle: bundle 由许多不同的模块生成，包含已经经过加载和编译过程的源文件的最终版本。
  • Bundle Splitting: 这个过程提供了一种优化构建的方法，允许 webpack 为单个应用程序生成多个 bundle 文件。因此，可以将每个 bundle 文件与影响其他文件的更改进行分离，从而减少重新发布并由此被客户端重新下载的代码量，并且运用浏览器缓存。

C

  • Chunk: 此 webpack 特定术语在内部用于管理捆绑过程。输出束（bundle）由块组成，其中有几种类型（例如 entry 和 child ）。通常，块 直接与 输出束 (bundle）相对应，但是，有些配置不会产生一对一的关系。
  • Code Splitting: 代码分离指将代码分成不同的包/块，然后可以按需加载，而不是加载包含所有内容的单个包。
  • Configuration: webpack 的配置文件是导出一个对象的 JavaScript 文件。 webpack 根据配置对象定义的属性进行解析。

D

  • Dependency Graph: 任何时候，一个文件依赖于另一个文件，webpack 就把此视为文件之间有 依赖关系 。从这些入口起点开始，webpack 递归地构建一个依赖图，这个依赖图包含着应用程序所需的每个模块。

E

  • Entry Point: 入口起点告诉 webpack 从哪里开始，并遵循着依赖图知道要打包哪些文件。您可以将应用程序的入口起点视为要捆绑的内容的 根上下文。

H

  • Hot Module Replacement (HMR)：模块热替换功能会在应用程序运行过程中替换、添加或删除 模块，而无需重新加载整个页面。

L

  • Loaders: loader 用于对模块的源代码进行转换。loader 可以使你在 require() 或"加载"模块时预处理文件。类似于一个 “task-runner”。
  • Lazy Loading: 对应用程序的部分（块）进行懒加载的过程。换句话说，只有我们在真正需要它们的时候才进行加载。

M

  • Module: Module 是离散功能块，相比于完整程序提供了更小的接触面。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
  • Module Resolution：一个模块可以作为另一个模块的依赖模块。resolver 是一个库(library)，用于帮助找到模块的绝对路径，并在 resolve.modules 中指定的所有目录中搜索该模块.
  • Manifest: 当完成打包并发送到浏览器时，会在运行时通过 Manifest 来解析和加载模块。

O

  • Output: 配置项指定将编译的文件输出到磁盘的位置。

    注意，即使可以存在多个入口起点，但只指定一个输出配置。

P

  • Plugin: webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且插件可在整个编译生命周期访问。这些包通常会以某种方式扩展编译功能。

R

  • Request: 指在 require/import 语句中的表达式，如在 require("./template/" + name + ".ejs") 中的请求是 "./template/" + name + ".ejs" 。

S

  • Shimming: 并非所有 JS 文件都可以直接与 webpack 一起使用。有些文件可能是不支持的模块格式，甚至不是任何模块格式。shimming 这时就会发挥作用。

T

  • Target: 用户配置的部署目标 此处列出 用于为特定环境编译，如浏览器、 NodeJS 或 Electron。
  • Tree Shaking: 删除未使用/多余的代码，或者更准确地说，实时代码导入。像 webpack 这样的编译器将通过分析各种 import 语句和导入代码的使用情况，来确定实际使用了依赖项的哪些部分来实现这一点，删除那些没有使用的 “树” 的部分。

V

  • Vendor Entry Point: 从 app.js 和 vendors.js 开始创建依赖图。这些依赖图完全是分开且独立的，允许使用 CommonsChunkPlugin，并将应用程序包的任何供应商（vendor）引用提取到你的供应商包中。有助于在 webpack 中实现一种称为 长期供应商缓存 的常见模式。

W

  • webpack: 一个用于现代 JavaScript 应用程序的高度可配置的 module 打包工具。

遵循许可

webpack

webpack 遵循 MIT 许可。

webpack logo 和 icon

webpack logo 和 icon 遵循不同的许可， 具体可以查看这里

webpack 文档

https://webpack.docschina.org/ 内容遵循 Creative Commons BY 4.0 许可，如果你在其他地方使用我们的内容，则需要放置许可证，并声明文档归属。

webpack 代码示例

代码示例使用 CC0 1.0 Universal (CC0 1.0)（公共领域） 许可，你可以自由使用它们。

编辑此页·打印文档

1 位贡献者

webpack