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 ...
随机推荐
- QQ感叹号是什么鬼?原来是服务器波动,腾讯官方来辟谣了
今天晚上很多网友在用QQ发送消息的时候发现,自己发送的消息一直是感叹号❗到底是怎么回事呢?是消息都发不出去了吗?马浩周通过手机测试后发现,其实消息是可以发出去的,而官方手机QQ出来已经通知了,是服务器 ...
- codeforces_1075_C. The Tower is Going Home
http://codeforces.com/contest/1075/problem/C 题意:一个长宽均为1e9的棋盘,n个垂直障碍在x列无限长,m个水平障碍在第y行从第x1列到x2列.可以水平和垂 ...
- Laravel Excel安装及最简单使用
官网:https://docs.laravel-excel.com/ 1.安装 1.1.安装要求: PHP: ^7.0 Laravel: ^5.5 PhpSpreadsheet: ^1.6 ...
- MFC定时器的使用
巧妙地使用定时器能达到意想不到的效果,写界面的时候能实现渐变,也能帮助多线程控制等我们知道,在VC的MFC中,已经为我们封装好了很多全面和强大的函数集,所以在MFC编程时,巧妙地调用MFC函数库可以为 ...
- HTML 之 DOM文件对象模型
文件对象模型 (DOM: Document Object Model) DOM 是 W3C定义的一种访问文档的标准. "The W3C Document Object Model (DOM) ...
- [JOYOI] 1052 没有上司的舞会
/ Joy OI / 题目列表 / 没有上司的舞会 题目限制 时间限制 内存限制 评测方式 题目来源 1000ms 131072KiB 标准比较器 Local 题目描述 Ural大学有N个职员,编号为 ...
- 去掉idea中的警告
目前我使用的两种方法 1.idea右下角有个小人,单击后选择Syntax即可 2.在setting→Editor→Inspections搜索SQL,把No data sources configure ...
- [Python3网络爬虫开发实战] 1.2.3-ChromeDriver的安装
前面我们成功安装好了Selenium库,但是它是一个自动化测试工具,需要浏览器来配合使用,本节中我们就介绍一下Chrome浏览器及ChromeDriver驱动的配置. 首先,下载Chrome浏览器,方 ...
- vue-router 根据路由动态添加目录 控制目录权限
<template> <el-row class="el-menu" > <el-menu router :default-active='$rout ...
- gcc 编译多个源文件
序 Linux 内核和许多其他自由软件以及开放源码应用程序都是用 C 语言编写并使用 GCC 编译的. 编译C++程序 编译.链接命令 -c 只编译不里链接 -o链接 例: g++ file1 -c ...