webpack打包保留依赖

webpack有一个externals的属性，防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。在webpack打包的时候，有的依赖不想打入webapck中，可用以下方式保留依赖，

例子1：

index.html

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

externals: {
    jquery: 'jQuery',
  },

这样就剥离了那些不需要改动的依赖模块，换句话，下面展示的代码还可以正常运行：

import $ from 'jquery';

$('.my-element').animate(/* ... */);

例子2：

externals: {
  'vscode': 'commonjs vscode'
}

具有外部依赖(external dependency)的 bundle 可以在各种模块上下文(module context)中使用，例如 CommonJS, AMD, 全局变量和 ES2015 模块。外部 library 可能是以下任何一种形式：

• root：可以通过一个全局变量访问 library（例如，通过 script 标签）。
• commonjs：可以将 library 作为一个 CommonJS 模块访问。
• commonjs2：和上面的类似，但导出的是 module.exports.default.
• amd：类似于 commonjs，但使用 AMD 模块系统。

详细使用可参考webpack的externals配置