最近有個需求，需要將組件庫打包為類庫，提供給各項目使用芜辕，并且不打包進項目中，優(yōu)化各項目切換時的資源加載块差，但是又不想影響我們在程序中的寫法（以import方式引用使用）侵续。
webpack的externals配置提供了這種方法。
externals
防止將某些 import 的包(package)打包到 bundle 中憨闰，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)状蜗。
例如，從 CDN 引入 jQuery鹉动，而不是把它打包：
index.html
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
webpack.config.js
module.exports={
//...
externals: {
jquery:'jQuery'
}
};
這樣就剝離了那些不需要改動的依賴模塊轧坎，換句話，下面展示的代碼還可以正常運行：
import $ from 'jquery';
$('.my-element').animate(/* ... */);
具有外部依賴(external dependency)的 bundle 可以在各種模塊上下文(module context)中使用泽示。
因此缸血，我們找到了如何使用我們自己的類庫的方法，將該配置加入要使用的項目中械筛，并在html中添加自己的類庫的腳本即可（myLibrary是我們接下來將要導出的類庫全局變量名）
webpack.config.js
module.exports={
//...
externals: {
'my-library': 'myLibrary'
}
};
那么一切都準備好了捎泻，接下來我們應該怎么將我們的組件庫打包成類庫呢？
我們將下面這段配置加入要打包的自己的類庫中：
webpack.config.js
module.exports = {
//...
output: {
library: 'myLibrary',
libraryTarget: 'umd'
}
};
在這個例子中埋哟，你需要 library 屬性來命名你的模塊笆豁。
library: 定義類庫的全局變量名，當通過 script 腳本引入時使用
libraryTarget: "umd" - 為了使你的類庫更通用，這里選擇使用umd闯狱，將你的 library 暴露為所有的模塊定義下都可運行的方式煞赢。它將在 CommonJS, AMD 環(huán)境下運行，或?qū)⒛K導出到 global 下的變量哄孤。
