webpack externals

时间:2022-09-14 23:47:49

当我们想在项目中require一些其他的类库或者API,而又不想让这些类库的源码被构建到运行时文件中,这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题:

//webpack.config.js
module.exports = {
externals: {
'react': 'React'
},
//...
}

externals对象的key是给require时用的,比如require('react'),对象的value表示的是如何在global(即window)中访问到该对象,这里是window.React。

同理jquery的话就可以这样写:'jquery': 'jQuery',那么require('jquery')即可。

HTML中注意引入顺序即可:

<script src="react.min.js" />
<script src="bundle.js" />

webpack externals的更多相关文章

  1. webpack打包优化之外部扩展externals的实际应用

    目录 前言 externals定义 用法 string array object function regex 实际案例 打包时间 打包之后包的大小 浏览器加载 需要注意 参考 前言 使用vue-cl ...

  2. 高性能流媒体服务器EasyDSS前端重构&lpar;四&rpar;- webpack &plus; video&period;js 打造流媒体服务器前端

    接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui> 本文围绕着实现EasyDSS高性能流 ...

  3. gulp 安装笔记

    1.全局安装cnpm(淘宝的npm国内镜像),gulp,rimraf(卸载用插件)npm install -g cnpm --registry=https://registry.npm.taobao. ...

  4. npm 使用指南参考

    [阮一峰npm scripts基本教程] [rimraf 跨平台删除文件] [ts-loader 安装问题] [nvm 安装使用] [npm镜像的问题] [webpack 如何引入jquery]web ...

  5. javascript 的引入

    目录 一.静态引入 1. html标签script引入 2. esm 中import ModuleName from 'module/path' 3. commonjs 中 const ModuleN ...

  6. 完美融合 nextjs 和 antd

    相信大家在使用nextjs的时候,难免遇到一些坑.其实可能大部分原因在于 nextjs 做了很多封装,我们可能不能第一时间搞清楚包括它相关的所有配置,比如其中的webpack配置.我前面也写过 SSR ...

  7. React读取Excel——js-xlsx 插件的使用

    介绍 SheetJS js-xlsx 是一款能够读写多种格式表格的插件,浏览器支持良好,并且能在多个语言平台上使用,目前在 github 上有 12602 个 star, 刚好项目中遇到了前端解析 e ...

  8. electron-vue中使用iview 报错this&period; is readonly的解决办法

    title: electron-vue中使用iview 报错this. is readonly的解决办法 toc: false date: 2019-02-12 19:33:28 categories ...

  9. Single-SPA 前端微服务化 动态路由多系统合并

    每日优鲜供应链前端团队微前端改造 动态注册路由,然后根据路由判断加载子项目js资源.子项目webpack需要设置externals,然后用systemjs接管external的包加载 webpack ...

随机推荐

  1. &lbrack;APUE&rsqb;文件和目录&lpar;上&rpar;

    一.文件权限 1. 各种ID 我在读这一章时遇到了各种ID,根据名字完全不清楚什么意思,幸好看到了这篇文章,http://blog.csdn.net/ccjjnn19890720/article/de ...

  2. 转-浅谈HTTP-GET 、 HTTP-POST 和SOAP

    HTTP-GET 和 HTTP-POST HTTP-GET和HTTP-POST是标准协议,他们使用HTTP(超文本传输协议)谓词(谓词是指条件表达式的求值返回真或假的过程.)对参数金星编码并将参数作为 ...

  3. ruby -- 基础学习(二) 外键配置实现级联删除

    该系列学习基于rails4.0 数据表:admins (id, name, address), articles (id, admin_id, title) admin_id 是表articles中的 ...

  4. yii 中引入js 和css 的方式

    在yii中 我们需要引入css 和 js 的时候,yii 自身有需要的类. 当我在views 视图层中引入css 和 js , <?php Yii::app()->clientScript ...

  5. 如何利用预编译指令来判断Delphi 的版本转载

    条件符号 含义 VERxx 编译器版本,XX表示版本,例如:Delphi 1.0 的编译器版本为80.Delphi 5.0 的编译器版本为130WIN32 是否WIN32的运行环境(Windows 9 ...

  6. CUDA随机数生成库curand——deviceAPI

    原创作品,如要转载请注明出处:http://www.cnblogs.com/shrimp-can/p/6590152.html 最近要在device函数中使用curand库生成随机数,查找了下资料,除 ...

  7. 浅谈java中内置的观察者模式与动态代理的实现

    一.关于观察者模式 1.将观察者与被观察者分离开来,当被观察者发生变化时,将通知所有观察者,观察者会根据这些变化做出对应的处理. 2.jdk里已经提供对应的Observer接口(观察者接口)与Obse ...

  8. 从壹开始前后端分离 &lbrack; Vue2&period;0&plus;&period;NET Core2&period;1&rsqb; 二十二&boxV;Vue实战:个人博客第一版&lpar;axios&plus;router&rpar;

    前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...

  9. 发现一款比echarts更牛B,效果更炫的图表组件 d3&period;js

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code d3.js  ,能制作更加复杂的图表 https://github.com/d3/d3 ...

  10. 9&period; spring项目中web&period;xml详解解读

    引言:本篇博客的内容大部分都来自网上,有的是直接copy,有的是自己整理而来.既然网上已经有了,为啥还有自己copy呢? 感觉是因为网上的东西太散了或者是样式不够美观,所以自己又copy了一遍.如有侵 ...