Open cheungseol opened 6 years ago
通过配置 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
const $ = window.jQuery
使用方式 3:
const $ = require("jquery") $("#content").html("<h1>hello world</h1>")
外部扩展(Externals)
https://github.com/zhengweikeng/blog/issues/10
创建 Library
webpack 配置中的外部扩展 Externals
通过配置 externals, 可以防止把某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
就是说 webpack 可以不处理某些依赖库,使用externals配置后,仍然可以在代码中通过CMD、AMD或者window/global全局的方式访问依赖。
比如在项目中是通过 script 引入 jquery
index.html
此时,就是运行时加载 jquery ,可以配置 webpack 不把 jquery 打包。
webpack.config.js
既剥离了不需要改动的依赖模块,同时也不影响下面的书写方式: 使用方式 1 :
使用方式 2 :
const $ = window.jQuery
使用方式 3:
参考
外部扩展(Externals)
https://github.com/zhengweikeng/blog/issues/10
创建 Library