javascript - webpack中library与libraryTarget还有externals如何理解？

Question

最近刚开始看webpack，看到LIBRARY AND EXTERNALS时，对library与libraryTarget还有externals实在看不懂。

不知道有谁可以帮我解释一下，这三个东西具体是怎么用的？

Answer 1

library和libraryTarget使用场景组件开发

组件一般是要发布到npm或其他地方提供其他人使用的，比如你将组件发布到npm，别人可以直接 npm install xxx 来安装，使用时直接 var xxx = require('xxx');。jquery其实就发布到了npm，你可以直接 npm i jquery -S 安装，然后 var $ = require('jquery') 使用。

如：你需要开发一个Math组件而且组件的入口文件只有一个，组件的源码类似：

// src/index.js
export default class Math {
  add(a, b) {
    return a + b;
  }
}

webpack配置：

{
    output: {
        // 组件采用UMD格式打包
        libraryTarget: "umd",
        // 组件名称
        library: "Math"
    }
}

编译后类似：

(function webpackUniversalModuleDefinition(root, factory) {
    // 这里就是UMD格式的组件方式
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else if(typeof exports === 'object')
        exports["Math"] = factory();
    else
        root["Math"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap ... })([function(module, exports) {

    "use strict";

    var Math = function () {
      function Math() {
        _classCallCheck(this, Math);
      }

      _createClass(Math, [{
        key: "add",
        value: function add(a, b) {
          return a + b;
        }
      }]);

      return Math;
    }();

    exports.default = Math;
    module.exports = exports['default'];

/***/ }
/******/ ])
});

externals使用场景是外部依赖不需要打包进bundle

比如：你在页面里通过script标签引用了jQuery：<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>，所以并不想在其他js里再打包进入一遍，比如你的其他js代码类似：

var $ = require('jquery');

$('.test').text('hello world');

webpack设置externals如下：

{
    externals: {
        //  其他js引用jQuery时编译类似var $ = jQuery;
        "jquery": "jQuery"
    }
}

编译后类似：

// 类似于变量替换
var $ = window.jQuery;

$('.test').text('hello world');

Answer 2

@zhengweikeng 呃呃呃，sorry，居然是externals忘了写s。。。。。。。。。。。。。。。。。。。。。。。