webpack里的externals

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack里的externals相关的知识,希望对你有一定的参考价值。

最近在用webpack做一些是sdk相关的东西,有几个概念总结一下:

1、library
要做sdk,一定要做的一个配置,用于说明最终的SDK暴露给调用者的一个名称
例如:library: ‘HelloJS‘,
外部调用的时候,就是HelloJS.method,import {**} from HelloJS,又或者是let a = require(‘HelloJS‘)

2、libraryTarget
是表示打包出去之后支持外部以一种什么样方式引入,global全局?commomJS的require还是ES6的模块化improt * from HelloJS

一般情况下,我配置libraryTarget: ‘umd‘,就是上面三种都支持,没问题,这样就对了

3、externals
表示很多时候我们用了第三方库,但是又不想让webpack将它打包到项目种,避免项目太大。这样就可以通过配置externals
例如,我现在又一个demo,需要引入HelloJS,然后我在demo工程里配置
externals{

HelloJS: ‘HelloJS’

}
此时demo代码中可以写import * from ‘HelloJS‘,是可以在浏览器被执行的,虽然最后webpack并没有将HelloJS打包到demo中,但是index.hmtl需要引用HelloJS,也就是说最终的index文件引入了webpack本身打包的bundle.js加上HelloJS









以上是关于webpack里的externals的主要内容,如果未能解决你的问题,请参考以下文章

webpack

webpack开发与生产环境 性能优化配置 - HMR - 缓存 -tree shaking - 代码分割 - 懒加载 - 预加载 - PWA - 多进程打包 - externals - dll(代码

关于 webpack external

webpack常用loader和plugin

webpack系列-externals配置使用(CDN方式引入JS)

webpack系列-externals配置使用(CDN方式引入JS)