Externals

Externals告诉Webpack那些模块不需要打包，这些模块依赖于外部环境，一般是通过外部环境提供的。比如jQuery的使用，通过Npm可以把jQuery模块下载到本地引入使用：

import $ from 'jquery';

像jQuery这种三方库，同时也提供了CDN资源：

<script src="https://code.jquery.com/jquery-3.1.0.js" crossorigin="anonymous"></script>

在使用script引入jQuery之后，在全局提供了jQuery这个全局变量,如果还想使用import语法导入就需要进行如下配置：

module.exports = {/* 其他配置 */externals: {jquery: 'jQuery'}
}

这里将导入语句里的jquery替换成全局变量jQuery。

如此一来，把jQuery抽离了出去，其引用由外部环境提供，这里通过CDN引入jQuery是外部环境提供实现的一种方式，外部环境提供还可以使用Npm下载的包，比如当使用Vue或者React等前端框架编写通用组件的时候，也可以配置Externals，使得该组件内部依赖的Vue或React模块依赖于集成该组件的项目中的Vue或React模块。

使用Externals减少了我们最后打包Bundle的大小，节约了请求时的带宽。

13 Webpack中的配置-Externals相关推荐

Webpack中resolve配置
背景: (1)开发中为什么引入模块时,不写具体的文件后缀,也能正确加载到文件呢? (2)甚至直接引入的是一个文件夹的路径时,也能正确使用文件下的index.js文件呢? import Child fr ...
java配置文件中的plugin,启用ContextReplacementPlugin以忽略webpack中的配置和测试设置文件...
我正在开发一个项目,其中我的文件夹结构如下 lib apps src / index.js(webpack的入口文件)jestEnvSetup.js webpack.config.js package ...
在Ubuntu 13.10 中安装配置 Hadoop 2.3.X - Tong Zeng
预备条件: 1. 已安装JDK Add Hadoop Group and User $ sudo addgroup hadoop $ sudo adduser --ingroup hadoop hd ...
配置webpack中externals来减少打包后vendor.js的体积
背景在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积 ...
webpack安装及配置
1.概念 webpack是一个静态化前端打包,可以把复杂的依赖关系打包为一个或多个文件,最终生成浏览器可以识别的资源html.css图片,js 2.安装 win+r输入cmd 唤出系统控制面板然后进 ...
webpack中的style-resources-loader加载全局css变量
我们在项目中经常会遇到这种场景,抽离了一些公用的样式,并且还会定义一些变量,比如:variables , mixins , function,之前都是在每个样式文件中手动的@import导入.styl ...
使用webpack中的externals配置项如何配置
externals配置项用于配置那些不需要打包进应用程序中的第三方依赖. 在webpack配置文件中,可以使用以下方式配置externals: module.exports = {externals: ...
在webpack中使用eslint配置（详细教程）-js教程-PHP中文网
本篇文章主要介绍了webpack引入eslint配置详解,现在分享给大家,也给大家做个参考. webpack中eslint使用首先,要使webpack支持eslint,就要要安装 eslint-lo ...
webpack中配置jquery暴露全局（expose-loader）
目录源代码普通引入内联loader使用 webpack配置全部暴露jquery cdn配置如何避免引入第三方模块最终代码源代码链接:https://pan.baidu.com/s/1i4 ...

13 Webpack中的配置-Externals

Externals

13 Webpack中的配置-Externals相关推荐

最新文章

热门文章