Webpack基础之入口起点

入口起点(Entry Points)

单个入口(简写)语法:

用法:entry: string|Array<string>
这里写图片描述
entry 属性的单个入口语法,是下面的简写
这里写图片描述

当你向 entry 传入一个数组时会发生什么?向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。传入数组这种方式有助于,在你想要多个依赖文件一起注入,并且将它们的依赖导向(graph)到一个“chunk”时。

对象语法:

用法:entry: {[entryChunkName: string]: string|Array<string>}
这里写图片描述
这里指定了两个入口,这里的 app 和 vendors 作为入口的名字,在配置 output 的时候可以用到

分离 应用程序(app) 和 公共库(vendor) 入口:

这里写图片描述
从表面上看,这告诉我们 webpack 从 app.js 和 vendors.js 两个入口文件开始创建依赖图表(dependency graph)。这些图表是彼此完全分离、互相独立的(每个 bundle 中都有一个 webpack 引导(bootstrap))。这种方式比较常见于,只有一个入口起点(不包括公共库 vendor)的单页应用程序(single page application)中。
假设 app 中引用了 vendors,这个时候打包后,app 中依旧包含了 vendors 中的代码,为此,需要使用 CommonsChunkPlugin 这个插件。来去除掉 app 中存在于 vendors 中的代码。使用了这个插件之后,会得到一个 commom 模块,vendors 模块中只有一句话,就是引用这个 common 模块。这种情况,可以配置 CommonsChunkPlugin 插件,让它得到的 common 模块的命名和 vendors 一样,这样就把 vendors 覆盖了。

多个页面应用程序:

这里写图片描述
我们告诉 webpack 需要 3 个独立分离的依赖图表

假如有 3 个页面,他们都应用了其中一个库,由于是单页应用,每次跳转都会刷新页面,重新加载脚本,因此可以将三个页面公用的类库打包为单个文件,这样其他页面可以利用前一个页面缓存下来的类库。同样的这个时候,也需要使用到 CommonsChunkPlugin 这个插件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407652.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js的动态加载、缓存、更新以及复用(四)

本来想一气呵成&#xff0c;把加载的过程都写了&#xff0c;但是卡着呢&#xff0c;所以只好在分成两份了。 1、页面里使用<script>来加载 boot.js 。 2、然后在boot.js里面动态加载 bootLoad.js。以时间作为标识 var dateVer date.getYear() _ date.getMonth() _ d…

Webpack基础之输出

输出(Output) output 选项控制 webpack 如何向硬盘写入编译文件。注意&#xff0c;即使可以存在多个入口起点&#xff0c;但只指定一个输出配置 用法(Usage)&#xff1a; 在 webpack 中配置 output 属性的最低要求是&#xff0c;将它的值设置为一个对象&#xff0c;包括以下…

[見好就收]NET 2.0 - WinForm Control - DataGridView 编程36计

原文:http://blog.csdn.net/fangxinggood/archive/2007/04/11/1561011.aspx#A1NET 2.0 - WinForm Control - DataGridView 编程36计&#xff08;一&#xff09;目录&#xff1a; ① 取得或者修改当前单元格的内容 ② 设定单元格只读 ③ 不显示最下面的新行 ④ 判断新增行 ⑤…

Webpack基础之加载器

加载器(Loaders)&#xff1a; loader 是对应用程序中资源文件进行转换。它们是&#xff08;运行在 Node.js 中的&#xff09;函数&#xff0c;可以将资源文件作为参数的来源&#xff0c;然后返回新的资源文件 示例&#xff1a; 例如&#xff0c;你可以使用 loader 告诉 webp…

历届试题 兰顿蚂蚁

http://lx.lanqiao.org/problem.page?gpidT125 历届试题 兰顿蚂蚁 时间限制&#xff1a;1.0s 内存限制&#xff1a;256.0MB问题描述兰顿蚂蚁&#xff0c;是于1986年&#xff0c;由克里斯兰顿提出来的&#xff0c;属于细胞自动机的一种。平面上的正方形格子被填上黑色或白色…

【转】基于XML-RPC的BloggerAPI学习

Luliang的mail2blog脚本&#xff0c;通过基于XML-RPC的BloggerAPI来实现的发布blog的功能。BloggerAPI是一套程序接口&#xff0c;用以支持远程操作blog.这个规范现在的版本是1.0&#xff0c;是个试验版本和α版本。但是&#xff0c;规范的研发人员不再对BloggerAPI进一步地开发…

Webpack基础之插件

插件(Plugins)&#xff1a; 插件是 wepback 的支柱功能。在你使用 webpack 配置时&#xff0c;webpack 自身也构建于同样的插件系统上&#xff01; 插件目的在于解决 loader 无法实现的其他事 剖析&#xff1a; webpack 插件是一个具有 apply 属性的 JavaScript 对象。 app…

Flex布局实战篇

网格布局&#xff1a; 1.基本网格布局&#xff1a; 最简单的网格布局&#xff0c;就是平均分布。在容器里面平均分配空间&#xff0c;只是需要设置项目的自动缩放 HTML代码如下 CSS代码如下 因为每个网格都已经设置好了固定的百分比空间&#xff0c;唯一要做的就是给…

javascript学习系列(2):数组中的filter方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…

写JQuery 插件 什么?你还不会写JQuery 插件

http://www.cnblogs.com/Leo_wl/p/3409083.html 前言   如今做web开发&#xff0c;jquery 几乎是必不可少的&#xff0c;就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了&#xff0c;用过的都知道。今天我们来讨论下jquery的插件…

stylus之选择器(Selectors)

选择器(Selectors)&#xff1a; 缩排&#xff1a; Stylus的空格有重要的意义&#xff0c;我们使用缩排和凹排代替花括号”{“以及”}” 上面代码就对应于 如果你喜欢&#xff0c;你可以把冒号加上&#xff0c;用做分隔&#xff0c;便于阅读 规则集: Stylus就跟CSS一…

委托模型和事件模型 [C#]

1. 多播委托与委托有关的语法&#xff1a; 定义委托&#xff1a;<modifiers> delegate <return_type> <delegate_name> (<argument_list>)public delegate void Message() ;创建委托实例&#xff1a;<delegate_type> <name> new <d…

javascript学习系列(3):数组中的foreach方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…

stylus之变量(Variables)

变量(Variables)&#xff1a; 变量&#xff1a; 我们可以指定表达式为变量&#xff0c;然后在我们的样式中贯穿使用 编译为 变量甚至可以组成一个表达式列表 标识符&#xff08;变量名&#xff0c;函数等&#xff09;&#xff0c;也可能包括$字符 属性查找&#…

你还不会ant design中的拖拽table实现吗

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 微信公众号关注小歌谣 前言 首先刚开始知道要书写一个这样的功能我的内心是比…

Sharepoint的文档库用资源管理器方式浏览报错“Explorer View ”解决方案。

最近在安装Wss3.0时候&#xff0c;在拷贝已存在资料到客户电脑上时&#xff0c;打开客户的文档库的资源管理器的时候&#xff0c;提示Explorer view 错误&#xff0c;而且客户端访问的时候也报错。 在经过N多的查询和搜索之后终于找到的了解决方法。原来如此http://207.46.19.1…

stylus之插值(Interpolation)

插值(Interpolation)&#xff1a; 插值&#xff1a; Stylus支持通过使用{}字符包围表达式来插入值&#xff0c;其会变成标识符的一部分。例如&#xff0c;-webkit-{‘border’ ‘-radius’}等同于-webkit-border-radius 比较好的例子就是私有前缀属性扩展 变身 选择器…

iOS 两个tableview的 瀑布流

iOS 两个tableview的 瀑布流1. [代码]Objective-C //// DocViewController.m// getrightbutton//// Created by 隋文涛 on 12-12-9.// Copyright (c) 2012年 隋文涛. All rights reserved.//#import "DocViewController.h"#define heightofimage(image) imag…

javascript学习系列(4):数组中的some方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说s…

stylus之运算符(Operators)

运算符(Operators): 运算符优先级: 下表运算符优先级&#xff0c;从最高到最低 一元运算符: 以下一元运算符可用”!”,”not”,”-“,””以及”~” 逻辑运算符not的优先级较低&#xff0c;因此&#xff0c;下面这个例子可以替换 用 二元运算符: 下标运算符[]允…