webpack-入口篇
入口起点【Entry Points】:
单个入口(简写)语法
用法:entry: string|Array<string>
例子(webpack.config.js)
const config = {
entry: './path/to/my/entry/file.js'
}; module.exports = config;
entry
属性的单个入口语法,是下面的简写:
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
当你向
entry
传入一个数组时会发生什么?向entry
属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入,并且将它们的依赖导向(graph)到一个“chunk”时,传入数组的方式就很有用。
当你正在寻找为「只有一个入口起点的应用程序或工具(即 library)」快速设置 webpack 配置的时候,这会是个很不错的选择。
然而,使用此语法在扩展配置时有失灵活性。
对象语法
用法:entry: {[entryChunkName: string]: string|Array<string>}
例子(webpack.config.js)
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
对象语法会比较繁琐。然而,这是应用程序中定义入口的最可扩展的方式。
“可扩展的 webpack 配置”是指,可重用并且可以与其他配置组合使用。这是一种流行的技术,用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具(如 webpack-merge)将它们合并。
常见场景
分离 应用程序(app) 和 第三方库(vendor) 入口
例子(webpack.config.js)
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
这是什么?从表面上看,这告诉我们 webpack 从 app.js
和 vendors.js
开始创建依赖图(dependency graph)。
这些依赖图是彼此完全分离、互相独立的(每个 bundle 中都有一个 webpack 引导(bootstrap))。
这种方式比较常见于,只有一个入口起点(不包括 vendor)的单页应用程序(single page application)中。
为什么?此设置允许你使用 CommonsChunkPlugin
从「应用程序 bundle」中提取 vendor 引用(vendor reference) 到 vendor bundle,并把引用 vendor 的部分替换为 __webpack_require__()
调用。
如果应用程序 bundle 中没有 vendor 代码,那么你可以在 webpack 中实现被称为长效缓存的通用模式。
多页面应用程序
例子(webpack.config.js)
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
这是什么?我们告诉 webpack 需要 3 个独立分离的依赖图(如上面的示例)。
为什么?在多页应用中,(译注:每当页面跳转时)服务器将为你获取一个新的 HTML 文档。
页面重新加载新文档,并且资源被重新下载。
然而,这给了我们特殊的机会去做很多事:
- 使用
CommonsChunkPlugin
为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多,多页应用能够复用入口起点之间的大量代码/模块,从而可以极大地从这些技术中受益。
webpack-入口篇的更多相关文章
- webpack浅析---入口篇
webpack有四个核心概念: 入口(entry) 输出(output) loader 插件(plugins) webpack-merge将环境.构建目标.运行时合并 入口: 入口起点是指webpac ...
- 上手 Webpack ? 这篇就够了!
JavaSript 模块化打包已混迹江湖许久.2009年,RequireJS 就提交了它的第一个版本,Browserify 接踵而至,随后其他打包工具也开始大行其道.最终,Webpack 从其中脱颖而 ...
- 翻译 | 上手 Webpack ? 这篇就够了!
译者:小 boy (沪江前端开发工程师) 本文原创,转载请注明作者及出处. 原文地址:https://www.smashingmagazine.com/2017/02/a-detailed-intro ...
- Webpack学习篇
<深入浅出Webpack>优化篇 01 Webpack 优化可以分为开发优化和输出质量优化两部分,主要要点如下: 优化开发体验,提升开发效率 优化构建速度 优化使用体验 优化输出质量 减少 ...
- Webpack -- 基础篇
篇仅演示 webpack 的基础搭建,为入门和走通基本流程而写.仅 window 系统. 1. 安装一些东西 安装 nodeJS,下载链接.然后检查安装是否完成. 系统“开始”和“R”键同时按住,桌面 ...
- webpack构建篇
WEBPack 构建 -- 基于webpack4 1.环境准备 NodeJs: 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.其使用了一个事件驱动.非阻塞式 I/O 的模 ...
- webpack入门篇--1.简单介绍
简单介绍: webpack是一个模块打包工具,给js准备的打包工具,可以把很多的模块打包成很少的文件 目标: 1.切分依赖数,分到不同代码块里,按需加载,懒加 载 2.任何静态资源都可以被视为一个模块 ...
- webpack 入口:entry
定义一个入口点就生成一个chunk.如果你只是用字符串的方式定义了一个入口点,其就被命名为main.如果你用对象的方式定义多个入口点,其就被命名为入口对象中的键值.下面两个例子是等价的: entry: ...
- webpack配置篇
开发环境(development)和生产环境(production)的构建目标差异很大.在开发环境中,我们需要具有强大的.具有实时重新加载(live reloading)或热模块替换(hot modu ...
- vue爬坑之路(webpack 配置篇)
在vue cli下 1.npm run dev 打开浏览器在config的index.js中修改autoOpenBrowser为true 关闭sourcemap productionSourceMap ...
随机推荐
- Ubuntu Linux14 64位下在Android studio下用gradle编译Andrid项目时发生libz.so.1共享库找不到的解决方法。
---恢复内容开始--- 我在Ubuntu14 64为下安装了AS,但在用Gradle编译项目时总是报找不到 libz.so.1的错误. error while loading shared libr ...
- leetcode_865. Smallest Subtree with all the Deepest Nodes
https://leetcode.com/problems/smallest-subtree-with-all-the-deepest-nodes/ 给定一颗二叉树,输出包含所有最深叶子结点的最小子树 ...
- chroot - 以 特定 根 目录 运行 命令 或者 交互式 shell
总览 (SYNOPSIS) chroot [OPTION] NEWROOT [COMMAND...] chroot OPTION 描述 (DESCRIPTION) 以 NEWROOT 为 根 目录 运 ...
- notepad++新建文档时,会出现语法错误的红色下波浪线
notepad++新建文档时,会出现语法错误的红色下波浪线: 原因:新建文档时默认设置语言为PHP. 解决方法:修改默认语言为java或JavaScript,如下: 小结:打开文档时,也可能出现下波浪 ...
- [实现] 利用 Seq2Seq 预测句子后续字词 (Pytorch)2
最近有个任务:利用 RNN 进行句子补全,即给定一个不完整的句子,预测其后续的字词.本文使用了 Seq2Seq 模型,输入为 5 个中文字词,输出为 1 个中文字词.目录 关于RNN 语料预处理 搭建 ...
- 诊断:RHEL7安装11.2RAC时root.sh错误ohasd failed to start
RHEL 7.5中安装11gRAC时,在grid infrastructure的root.sh执行时,报错: # /oracle/product/11g/grid/root.sh ... Adding ...
- Spring接收web请求参数的几种方式
1 查询参数 请求格式:url?参数1=值1&参数2=值2...同时适用于GET和POST方式spring处理查询参数的方法又有几种写法: 方法一:方法参数名即为请求参数名 // 查询参数1 ...
- select into outfile 与 load data infile
select into outfile用法 MySQL中,可以使用SELECT...INTO OUTFILE语句将表的内容导出为一个文本文件. SELECT [列名] FROM table [WHER ...
- ubuntu 16.4 安装mysql-python
sudo apt-get install python-pip python-dev libmysqlclient-dev pip install MySQL-python
- Python之机器学习-朴素贝叶斯(垃圾邮件分类)
目录 朴素贝叶斯(垃圾邮件分类) 邮箱训练集下载地址 模块导入 文本预处理 遍历邮件 训练模型 测试模型 朴素贝叶斯(垃圾邮件分类) 邮箱训练集下载地址 邮箱训练集可以加我微信:nickchen121 ...