webpack学习之—— 依赖图(Dependency Graph) 及 构建目标(Targets)
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:
webpack学习之—— 依赖图(Dependency Graph) 及 构建目标(Targets)的更多相关文章
- webpack学习笔记丁点积累
webpack是什么? https://webpack.js.org/concepts/ https://code.tutsplus.com/tutorials/introduction-to-web ...
- webpack学习笔记(1)--webpack.config.js
主要的信息都是来自于下方所示的网站 https://webpack.docschina.org/configuration 从 webpack 4.0.0 版本开始,可以不用通过引入一个配置文件打包项 ...
- webpack学习之——Entry Points(入口起点)
1.Entry property(entry属性) 1.1 Single Entry (Shorthand) Syntax(单个入口语法) 用法:entry: string | Array<st ...
- webpack-Targets(构建目标)
构建目标(Targets) 因为服务器和浏览器代码都可以用 JavaScript 编写,所以 webpack 提供了多种构建目标(target),你可以在你的 webpack 配置中设置. webpa ...
- webpack 学习1 安装构建项目
本文中使用的webpack版本是4+,请注意区分 node.js安装 node.js下载地址 选择较低版本的稳定版下载,下载完成后得到的是一个msi文件,点击安装即可 安装完毕以后新建一个文件夹,并在 ...
- 前端小白webpack学习(一)
俗话说得好,好记性不如烂笔头. 之前就在学习中看过webpack的教程,然而一段时间没用,火速的忘光了.写这篇博文,做个总结,也让自己以后有个地方回顾. 看webpack之前,我先去看了一下官方文档, ...
- Webpack 学习手记
官网:https://www.webpackjs.com/ 参考网址:https://www.cnblogs.com/cangqinglang/p/8964460.html 1.webpack简述:是 ...
- webpack 学习总结demo
github源码地址 https://github.com/ghshuo/webpack-demo webpack介绍 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(mo ...
- 前端模块化工具--webpack学习心得
话说前头 webpack前段时间有听说一下,现在已经到了3.x的版本,自己没去接触.因为之前使用gulp来作为自己的项目构建工具.现在感觉gulp使用的趋势在减少.现在这段时间去接触了webpack, ...
随机推荐
- spring retry 重试机制完整例子
public static Boolean vpmsRetryCoupon(final String userId) { // 构建重试模板实例 RetryTemplate retryTemplate ...
- fftw3.3.3在redhat4.4下安装
FFTW ( the Faster Fourier Transform in the West) 是一个快速计算离散傅里叶变换的标准C语言程序集,其由MIT的M.Frigo 和S. Johnson 开 ...
- 复制字符串 _strdup _wcsdup _mbsdup
Duplicate strings.函数定义: char *_strdup( const char *strSource ); wchar_t *_wcsdup( const wchar_t *str ...
- Ionic 日期时间插件
1.插件安装 日期插件 时间插件 备注: 具体 查看 https://github.com/rajeshwarpatlolla/ionic-datepicker https://github.c ...
- JDK中有关23个经典设计模式的示例
Creational patterns Abstract factory (recognizeable by creational methods returning an abstract/inte ...
- Pycharm中运行Python代码的几种方式
在pycharm中的Python代码运行会出现各种奇葩的问题,比如,密码输入时不显示或没有提示,给我们带来一些麻烦,下面介绍几种代码运行的几种方式: 一.直接运行(Run按钮或者快捷键shift+F1 ...
- openCV 矩阵(图像)操作函数
有很多函数有mask,代表掩码,如果某位mask是0,那么对应的src的那一位就不计算,mask要和矩阵/ROI/的大小相等.大多数函数支持ROI,如果图像ROI被设置,那么只处理ROI部分 少部分函 ...
- Composer安装Yii2以及相关扩展
1.安装redis扩展 命令:composer require yiisoft/yii2-redis Git地址:https://github.com/yiisoft/yii2-redis/blob/ ...
- LeetCode简单算法之删除链表中的节点 #237
闲来无事,刷刷力扣,以解心头之闷. 题目内容: 请编写一个函数,使其可以删除某个链表中给定的(非末尾)节点,你将只被给定要求被删除的节点. 现有一个链表 -- head = [4,5,1,9],它可以 ...
- docker和宿主机之间复制文件
从主机复制到容器sudo docker cp host_path containerID:container_path 从容器复制到主机sudo docker cp containerID:conta ...