webpack学习之—— 依赖图(Dependency Graph) 及 构建目标(Targets)
2024-10-08 01:15:36
Dependency Graph
任何时候,一个文件依赖于另一个文件,webpack 就把此视为文件之间有依赖关系。这使得 webpack 可以接收非代码资源(non-code asset)(例如图像或 web 字体),并且可以把它们作为依赖提供给你的应用程序。
webpack 从命令行或配置文件中定义的一个模块列表开始,处理你的应用程序。 从这些入口起点开始,webpack 递归地构建一个依赖图,这个依赖图包含着应用程序所需的每个模块,然后将所有这些模块打包为少量的 bundle - 通常只有一个 - 可由浏览器加载。
对于 HTTP/1.1 客户端,由 webpack 打包你的应用程序会尤其强大,因为在浏览器发起一个新请求时,它能够减少应用程序必须等待的时间。对于 HTTP/2,你还可以使用代码拆分(Code Splitting)以及通过 webpack 打包来实现最佳优化。
构建目标(Targets)
因为服务器和浏览器代码都可以用 JavaScript 编写,所以 webpack 提供了多种构建目标(target),你可以在你的 webpack 配置中设置。
用法
要设置 target
属性,只需要在你的 webpack 配置中设置 target 的值。
webpack.config.js
在上面例子中,使用 node
webpack 会编译为用于「类 Node.js」环境(使用 Node.js 的 require
,而不是使用任意内置模块(如 fs
或 path
)来加载 chunk)。
多个 Target
尽管 webpack 不支持向 target
传入多个字符串,你可以通过打包两份分离的配置来创建同构的库:
webpack.config.js:
最新文章
- 使用EditText的addTextChangedListener(new TextWatcher())方法
- 163邮箱问题:554 DT:SPM 163 smtp5,D9GowACHO7RNWNdXmXs1Bw--.9035S2
- javascript随笔20160808
- 01 ~ 03 headfirst php &; mysql
- cached过高导致内存溢出 java head space
- hibernate里createSQLQuery的addEntity()和setResultTransformer()方法
- oracle 创建同义词
- mybatis Mapper XML 文件
- 在CentOS下源码安装 Xen并搭建Windows虚拟机
- ubuntu 连接VPN 命令
- 什么是RESTful?
- php文件上传提示错误:找不到临时文件夹
- git 同步勾子
- maven 在clean package时,出现:找不到符号 [ERROR] 符号: 方法 sqlDdlFilter(java.lang.String) 解决办法
- 037_nginx第三方扩展
- tomcat优化,java查看
- Java笔试面试题整理第四波
- 02 while循环,密码登录
- Android——sqlite3 基本命令操作
- [转载]用 FFMPEG 合并 MP4 视频
热门文章
- 03jQuery对象初识(二)筛选器2
- osg::BlendFunc来设置透明度
- 7.Spring切入点的表达式和通知类型
- Python基础——使用with结构打开多个文件
- Odoo(OpenERP)配置文件详解
- zepto.js按需载入模板对象
- StoryBoard拆分(Storyboard References)
- 2019-8-31-C#-程序集数量对软件启动性能的影响
- 威胁快报|首爆新型ibus蠕虫,利用热门漏洞疯狂挖矿牟利
- Django项目:CRM(客户关系管理系统)--33--25PerfectCRM实现King_admin添加出错修复