[ [npm] [npm-url] (英语)
[节点] [节点-url] [去 [去去去去去去去去去去] [测试] [测试-url] [建 [建 [建 -url] [建2][建2][建2-url] [覆盖] [覆盖-url] [许可证] [许可证-url] [PR的欢迎] [prs -url]
网络软件包
webpack是一个模块捆绑器. 其主要目的是将JavaScript文件捆绑,供浏览器使用,然而它也能够仅仅就任何资源或资产进行转换,捆绑,或包装.
目录
安装
用 npm 安装 :
npm install --save-dev webpack
用纱线安装 :
yarn add webpack --dev
导言
webpack 是模块的捆绑器. 主要目的是捆绑 JavaScript 用于浏览器的文件,但它也能够转换、捆绑、, 任何资源或资产.
TL; DR 数据
- 套装 ES 模块, (中文(简体) ), 常见JS,以及 AMD (英语) 模块(甚至合并).
- 可以创建单个捆绑或多个块,在运行时同步加载(以缩短初始加载时间).
- 依赖性在编译过程中得到解决,减少了运行时间大小.
- 加载器在编译时可以预处理文件,例如TypeScript到JavaScript,Handlebars字符串到编译函数,图像到Base64等.
- 高度模块化的插件系统来做你应用程序所需要的其他任何工作.
开始
浏览器兼容性
webpack 支持所有浏览器 符合ES5要求 (IE8及以下不支持).
网络包装也需要 Promise 页:1 import() 财务报告和审定财务报表 require.ensure()。如果想要支持旧浏览器,则需要 装入多填充 在使用这些表达式之前.
概念
插件
网络包装有一个 丰富的插件 接口。大多数特征 在 Webpack 内部本身使用此插件接口。 这使得网络包装非常 灵活。 。 。 .
| 名称 | 状态 | 安装大小 | 说明 |
|---|---|---|---|
| 微型 cs- 提取插件 |  | 将 CSS 提取到单独的文件中 。 它每个JS文件创建一个CSS文件,包含CSS. | |
| 压缩- webpack- 插件 |  | 编制资产压缩版本,以提供内容编码服务 | |
| i18n-webpack-插件 |  | 在您的捆绑中添加 i18n 支持 | |
| html-webpack-插件 |  | 简化 HTML 文件的创建( Y)index.html为你的捆绑服务 | |
| 取出文本- 网包- 插件 |  | 从捆绑或捆绑中提取文本到单独的文件 |
装入器
webpack 允许使用加载器预处理文件. 这样你就可以捆了 任何静态资源 远超越了JavaScript. 你可以轻松 自己写 装载器 使用节点.j.
装入器通过使用 loadername! 前缀在 require() 发言,
或自动通过网络包配置的regex应用.
文件
| 名称 | 状态 | 安装大小 | 说明 |
|---|---|---|---|
| 活装机 |  | 装入文件的原始内容( utf-8) | |
| 瓦尔装填器 |  | 执行作为模块的代码,并将导出视为JS代码 | |
| url 装填器 |  | 像文件加载器一样工作, 但是如果文件小于限制, 可以返回 Data Url | |
| 文件装入器 |  | 将文件输入输出文件夹并返回( 相对) URL |
贾森
| 名称 | 状态 | 安装大小 | 说明 |
|---|---|---|---|
 |  | 装入 JSON 文件( 默认包含) | |
 |  | 装入并转出 JSON 5 文件 | |
 |  | 装入并转录 CSON 文件 |
传输
| 名称 | 状态 | 安装大小 | 说明 |
|---|---|---|---|
<script> |  | 执行一次全局背景下的 JavaScript 文件( 如脚本标签) , require()s 未解析 | |
 |  | 使用 ES2015+ 代码和转接器装入 ES5 宝贝 | |
 |  | 使用 ES2015+ 代码和转接器装入 ES5 追踪器 | |
 |  | 装入类似 JavaScript 的脚本 | |
awesome-typescript-loader |  | 用于 Web 软件包的出色类型Script 加载器 | |
|  | 装入类似 JavaScript 的 Coffee 脚本 |
温和
| 名称 | 状态 | 安装大小 | 说明 |
|---|---|---|---|
 |  | 导出 HTML 为字符串, 需要参考静态资源 | |
 |  | 装入 Pug 模板并返回一个函数 | |
 |  | 装入 Jade 模板并返回一个函数 | |
 |  | 将马克下调为 HTML | |
 |  | 使用 HTML 文件装入并转换 HTML 后页 | |
 |  | 将处理栏编译为 HTML |
样式
| 名称 | 状态 | 安装大小 | 说明 |
|---|---|---|---|
<style> |  | 将模块导出为样式到 DOM | |
 |  | 装入已解析的 CSS 文件并返回 CSS 代码 | |
 |  | 装入并编译 LESS 文件 | |
 |  | 装入并编译 Sass/SCSS 文件 | |
 |  | 装入并编译 Stylus 文件 | |
 |  | 使用 CSS/ SSS 文件装入并转换 邮政 |
启动测试( T)
| 名称 | 状态 | 安装大小 | 说明 |
|---|---|---|---|
 |  | 使用摩卡(浏览器/节点JS)的测试 | |
 |  | 使用 ESLint 启动代码预读器 | |
 |  | 使用 JSHint 启动代码预读器 |
框架
| 名称 | 状态 | 安装大小 | 说明 |
|---|---|---|---|
 |  | 装入并编译 Vue 组件 | |
 |  | 使用预处理器选择的 HTML & CSS 处理 require() Web 组件如一等模块 | |
 |  | 装入并编译角 2 组件 | |
 |  | 暴动官方网络包装加载器 |
业绩
webpack使用Aync I/O并具有多位缓存水平. 这样就快了 令人难以置信 快点 关于增量汇编.
模块格式
webpack 支持 ES2015+, CommunityJS 和 AMD 模块 从盒子里出来。它执行聪明的静态 分析您的代码 AST。 它甚至有一个评估引擎来评估 简单表达式。 这让你可以 支持大多数现有图书馆 从盒子里出来.
代码分割
网页包允许您将您的代码库分割成多个块。 块是 运行时同步装入 。 这缩短了初始加载时间 .
优化
网页包可以做许多优化 减小您的输出大小 Java 脚本 通过去除常用模块、精密化和给予 您可以完全控制初始装入的和运行时装入的 通过代码分割。 它也可以让你的代码块 缓存 亲切 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}用散热器.
捐款
我们希望为网络包装做贡献,让人人都能享受、享受和教育. 我们有一个 充满活力的生态系统 超越了这个单回波。 欢迎您检查任何存放在 我们的组织 或者说 网络软件包组织 里面有我们所有的装载器和插件.
捐款远不止于催促请求和承诺。 虽然我们爱给你机会把你的邮票贴上网络包装,但我们也很高兴收到各种其他贡献,包括:
- 文档 更新、增强、设计或错误修正
- 拼写或语法修正
- README.md 更正或重新设计
- 添加单元或功能测试
- 调整GitHub问题 -- -- 特别是确定一个问题是否仍然存在或是否可以复制.
- 在推特上搜索#webpack 帮助需要帮助的人
- 教别人如何为众多网络包装的回放之一出力!
- 博客、 谈论或创建教程 有关webpack的许多功能之一.
- 帮助我们的网络包装中的其他人 闪烁通道。 。 。 .
如果你担心或者不知道从哪里开始,你可以 永远 联系到 Sean Larkin(@TheLarkInn)在推特上发表文章 或只提出一个问题,而维护者能帮助你们遵循正道!
我们还开始了一系列 中型出版物 调用 贡献者网络包装指南我们欢迎您阅读它,并在您仍然需要帮助时张贴任何问题或答复.
想谈谈网络包装吗? 我们会 爱 来回顾你的演讲摘要/CFP! 你可以发电子邮件给 Webpack [at] open collective [dot] com, 我们可以给指针或提示!
创建自己的插件和加载器
如果您创建了加载器或插件, 我们将会 < 3 打开源码, 并把它放在 npm 上 。 我们跟着 x-loader, (中文(简体) ), x-webpack-plugin 命名大会.
支助
我们认为网络包装是一种低级的工具,不仅被单独使用,而且还被分层地放在其他出色的工具之下。 由于其灵活性,网络包装并不总是 简单 入门级解决方案,但我们认为它是最强大的。 尽管如此,我们总是在寻找改进和简化工具的方法,同时不损害功能. 如果你有任何想法 要完成这一点, 我们都听!
如果你刚刚开始,看看 我们的新文件和概念页面这对初学者来说是不错的!
找1号网页文件? 请检查出旧的 维基百科,但请注意,这个已贬值的版本不再被支持.
如果你想谈谈什么 或者只是需要帮助, 这是我们的吉特房 总是有人想帮忙!
如果你还有困难,我们很乐意你发表 问题 与 Webpack 标签相叠流。要回答包含您的 Webpack.config.js 和相关文件的问题要容易得多! 因此,如果你能提供它们,我们将非常感激(并且更可能帮助你找到答案!)
如果你是twitter savvy, 你可以用你的问题推特#webpack.
如果你发现了一个QQ或有一个特征建议,请随意在Github上创建一个问题.
许可证
核心小组
托比亚斯·克珀斯 核心 网页包创建者 |
约翰内斯·埃瓦尔德 装入器和插件 网络包装的早期采纳者 |
肖恩·拉金(Sean T 公共关系 核心小组创始人 |
基斯克卢斯肯斯 发展 发起人 
|
赞助
生态系统中的大多数核心团队成员、网络包装贡献者和贡献者在他们的空闲时间从事这一开放源码工作。 如果你用网络包装来完成一个严肃的任务,而你希望我们投入更多的时间,请捐赠. 这个项目也提高了你的收入/生产力。 它使开发和应用更快,并会减少所需的带宽.
这就是我们如何使用捐款:
- 允许核心团队在网络包装上工作
- 感谢捐助者投入大量时间捐款
- 支持对用户有重大价值的生态系统项目
- 支持获得最多票数的项目(正在进行中)
- 基础设施费用
- 货币手续费
高级伙伴
其他支持者和赞助者
在开始使用OpenCollective之前,捐款是匿名的. 既然我们做了这一调整,我们想感谢这些提案国(以及继续使用OpenCollective捐款的国家)。 如果我们错过了某个人,请给我们发公关,我们会把你加入这个名单.
黄金赞助商
成为黄金赞助商 并在Github的读取器上找到你的标志 链接到你的网站.
白银赞助商
成为银色赞助商 并在Github的读取器上找到你的标志 链接到你的网站.
青铜赞助商
成为青铜赞助商 并在Github的读取器上找到你的标志 链接到你的网站.
备份
成为后卫 在Github的读取器上显示你的照片 并链接到你的网站.
<a href='https://ope