Webpack in Action (4)

[cheungseol]

webpack 配置中的外部扩展 Externals

通过配置 externals， 可以防止把某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

就是说 webpack 可以不处理某些依赖库，使用externals配置后，仍然可以在代码中通过CMD、AMD或者window/global全局的方式访问依赖。

比如在项目中是通过 script 引入 jquery

index.html

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

此时，就是运行时加载 jquery ，可以配置 webpack 不把 jquery 打包。

webpack.config.js

output: {
    ...
    libraryTarget: "umd"
}

externals: {
   jquery: 'jQuery'
}

既剥离了不需要改动的依赖模块，同时也不影响下面的书写方式：
使用方式 1 ：

import $ from 'jquery';
$('.my-element').animate(...);

使用方式 2 ：
const $ = window.jQuery

使用方式 3：

const $ = require("jquery")
$("#content").html("<h1>hello world</h1>")

参考

外部扩展(Externals)

zhengweikeng/blog#10

创建 Library