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,一经查实,立即删除!

相关文章

Tailwind CSS 是一个工具集 CSS 框架

Tailwind CSS 是一个工具集 CSS 框架&#xff0c; 助你快速实现定制化的网站设计。 Tailwind CSS 是一个高度可定制的基础层 CSS 框架&#xff0c;它为您提供了构建定制化设计所需的所有构建块&#xff0c;而无需重新覆盖任何内建于框架中的设计风格。 官网&#xff1a;https:/…

explorer.exe被删除了怎么办?

系统的dllcache里面还有的哦 按ctrlaltdel调出任务管理器,新建一个任务 cmd /k copy c:\windows\system32\dllcache\explorer.exe c:\windows 然后再次运行一个命令: explorer 搞定

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

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

React开发(106):getFieldDecorator不能包裹太多div

<Row gutter{12}><Col span{12}><Form.Item label"推送规则用户列表" required>{getFieldDecorator(userRule, {initialValue: popupByIdDetail.userRule,})(<Radio.Group onChange{this.handleOpenCategoryType}>{cmsUseRule.map((item) &g…

linux 文件中搜索字符串命令 grep

用‘grep’搜索文本文件 如果您要在几个文本文件中查找一字符串&#xff0c;可以使用‘grep’命令。‘grep’在文本中搜索指定的字符串。假设您正在‘/usr/src/linux/Documentation’目录下搜索带字符串‘magic’的文件&#xff1a;$ grep magic /usr/src/linux/Documentation/…

贝尔曲线测试网站

https://cubic-bezier.com/#.07,.68,.21,.98 手捏贝尔参数

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; ① 取得或者修改当前单元格的内容 ② 设定单元格只读 ③ 不显示最下面的新行 ④ 判断新增行 ⑤…

Taro+react开发(25)三元

//disabledtrue就会执行第一个条件 checkedtrue执行第二个条件否则第三个 点击触发change 事件<View className{"check-box"} onClick{this.handleChange}>{disabled ? (<Image src{SelectedDisabledIcon} />) : checked ? (<Image src{SelectedI…

gcc -D选项的作用

gcc -D选项在man中的说明如下&#xff1a; -D name Predefine name as a macro, with definition 1. -D namedefinition The contents of definition are tokenized and processed as if they appeared during translation phase th…

Webpack基础之加载器

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

移动端实现hover效果

document.body.addEventListener(‘touchstart’, function(){ });加上这行代码&#xff0c;空函数就行 然后&#xff1a;hover改成&#xff1a;active&#xff0c;实现PC端hover效果

历届试题 兰顿蚂蚁

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

Taro+react开发(26)taro基本骨架

import Taro, { Component } from "tarojs/taro";class companyTitle extends Component {state {geyao: "1111"};render() {return <div>11111</div>;} }export default companyTitle;

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

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

前端技巧——js篇

前端技巧——js篇 复制操作 copy () {let url this.code;let oInput document.createElement(input);oInput.value url;document.body.appendChild(oInput);oInput.select(); // 选择对象console.log(oINput.value);document.execCommand(Cooy); // 执行浏览器复制命令a…

Webpack基础之插件

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

Taro+react开发(27)别加view

return (<div><View>11111</View><ImageclassName"unit-info-tax-tip"src{require("./companyTitle/system-item1.png")}/></div>

使用windows资源管理器打开jar

在命令行里输入&#xff1a; assoc .jarCompressedFolder转载于:https://www.cnblogs.com/pavkoo/p/3805456.html

MYSQL进入客户端后切换服务器的简单做法试验

今天发现有个\r 选项可以切换连接。不过功能比较单一。connect (\r) Reconnect to the server. Optional arguments are db and host.进入客户端后切换服务器连接的做法。只能是切换到和另外一个SERVER端口&#xff0c;用户名&#xff0c;密码都是一样的。原来SERVER&#xf…