externals

官网文档解释的很清楚,就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

怎么理解呢?我们先通过官网说的那个jquery的案例来理解。

有时我们希望我们通过script引入的库,如用CDN的方式引入的jquery,我们在使用时,依旧用require的方式来使用,但是却不希望webpack将它又编译进文件中。

  1. <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

View  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

  1.  

jquery的使用如下

  1. // 我们不想这么用
  2. // const $ = window.jQuery
  3.  
  4. // 而是这么用
  5. const $ = require("jquery")
  6. $("#content").html("<h1>hello world</h1>")

  

这时,我们便需要配置externals

  1. module.exports = {
  2. ...
  3. output: {
  4. ...
  5. libraryTarget: "umd"
  6. },
  7. externals: {
  8. jquery: "jQuery"
  9. },
  10. ...
  11. }

我们可以看看编译后的文件

  1. ({
  2. 0: function(...) {
  3. var jQuery = require(1);
  4. /* ... */
  5. },
  6. 1: function(...) {
  7. // 很明显这里是把window.jQuery赋值给了module.exports
  8. // 因此我们便可以使用require来引入了。
  9. module.exports = jQuery;
  10. },
  11. /* ... */
  12. });

  

我们自己可以写个例子,当然这个例子没什么实际意义,只是为了演示如何使用而已。

假设我们自己有个工具库,tools.js,它并没有提供给我们UMD的那些功能,只是使用window或者global的方式把工具的对象tools暴露出来

  1. window.Tools = {
  2. add: function(num1, num2) {
  3. return num1 + num2
  4. }
  5. }

接下来把它放在任何页面能够引用到的地方,例如CDN,然后用script的方式引入页面

  1. <script src="http://xxx/tools.min.js"></script>

一般来说我们可能会直接就这么用了

  1. const res = Tools.add(1,2)

但是既然我们是模块化开发,当然要杜绝一切全局变量了,我们要用require的方式。

  1. const tools = require('mathTools')
  2. const res = tools.add(1,2)

  

这是我们再来配置一些externals即可

  1. module.exports = {
  2. ...
  3. output: {
  4. ...
  5. libraryTarget: "umd"
  6. },
  7. externals: {
  8. mathTools: "tools"
  9. },
  10. ...
  11. }

关于externals的配置

首先是libraryTarget的配置,我们上面的例子都是umd 
当然它还有其他配置方式,具体就看官网文档吧,我们可以看到配置成umd便可以使用任何一种引入的方式了

webpack的externals的使用的更多相关文章

  1. 配置webpack中externals来减少打包后vendor.js的体积

    在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本 ...

  2. 减少打包组件vue.config.js——Webpack的externals的使用

    vue.config.js module.exports = { configureWebpack:{ externals: { vue: 'Vue', 'vue-router':'VueRouter ...

  3. 【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧!

      [前言]:因为最近在搞百度地图API的时候到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的"收尾工作"--即打包,而没有把它纳入到 ...

  4. 搭建一个webpack微服务器

    [前言]:因为最近在vue2.0的时候用到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”——即打包,而没有把它纳入到项目开发的“主体过程”中来 ...

  5. Webpack4 学习笔记四 暴露全局变量、externals

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...

  6. create-react-app 使用 webpack 打包压缩失败

    问题,正常 npm run build 打包后,发现打包后的文件异常大,有 > 20M 的大小 分析, 1.起初以为是代码本身过大的原因导致的,所以一直在想如何进行代码拆分使得文件能尽可能的小, ...

  7. 项目构建分析和 webpack 优化实践

    加入新公司一个月,最近接手在做一个 chrom 浏览器插件的项目,开发过程中发现项目打包的时间很长,足足有30多秒,这是让人很难接受的,而且构建的显示了几条包体积过大的提示信息: 可以看到,打包后有三 ...

  8. webpack 打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)

    如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识.webpack 的基本用法这里就不展开讲了.主要探讨一下如何提高 webpack ...

  9. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

随机推荐

  1. spring 整合junit进行测试

    如果想让junit和spring容器环境无缝对接的话,可以使用如下方式: import com.jd.ptest.service.ICronService; import org.junit.Test ...

  2. Android recovery支持adb shell

    Android recovery支持adb shell 近期开发过程注意到recovery不支持adb shell.为了便于调试方便,决定添加此功能. 刚開始我们採用的是user版本号系统,进入rec ...

  3. Java编程的逻辑 (92) - 函数式数据处理 (上)

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  4. bat搜集

    1. 删除文件夹下指定名称的所有子文件夹 @echo off ::设置要保留的文件夹名,多个文件夹之间用英文逗号隔开,如果包含空格或英文逗号,英文&以及其它一些特殊字符的名字,请把该完整名字用 ...

  5. 前后端分离springmvc和RESTful理解

    1. 理解MVC MVC是一种经典的设计模式,全名为Model-View-Controller,即模型-视图-控制器. 其中,模型是用于封装数据的载体,例如,在Java中一般通过一个简单的POJO(P ...

  6. js this 引起的祸

    注意:这里的 this 指向已经改变了. 所以不能再次使用 this 需在上面自定义变量. 那些年踩过的坑,记录一下.

  7. 【QT】二进制读取图像文件测试

    QDataStream in(&file); int n; in >> n ; file.close(); qDebug() << n<<"en& ...

  8. 网络编程 -- RPC实现原理 -- 目录

    -- 啦啦啦 -- 网络编程 -- RPC实现原理 -- NIO单线程 网络编程 -- RPC实现原理 -- NIO多线程 -- 迭代版本V1 网络编程 -- RPC实现原理 -- NIO多线程 -- ...

  9. Python sqlite3操作笔记

    创建数据库 def create_tables(dbname): conn = sqlite3.connect(dbname) print "Opened database successf ...

  10. 盘点 React 16.0 ~ 16.5 主要更新及其应用

    目录 0. 生命周期函数的更新 1. 全新的 Content API 2. React Strict Mode 3. Portal 4. Refs 5. Fragment 6. 其他 7. 总结 生命 ...