externals
防止将某些import的包打包进bundle中，而是在运行时再去外部（cdn，script的方式）获取这些扩展依赖。
操作三部曲
- html文件中引入cdn资源
<head> <link rel="stylesheet" href="//unpkg.com/iview@2.8.0/dist/styles/iview.css"> <script src="//cdn.bootcss.com/vue/2.5.17/vue.min.js"></script> <script src="//unpkg.com/iview@2.8.0/dist/iview.min.js"> </script> </head> - webpack externals配置
// webpack.config.js module.exports = { externals: { iview: 'iview' // '包名':'全局变量' } } // 属性名iview指的是 `import iview from 'iview'`中的'iview' // 属性值 iview指的是iview暴露出来的全局对象名 - 文件中引用
import iview from 'iview'
externals和libraryTarget的关系
- externals 是决定的以哪种模式去加载所引入的额外的包
- libraryTarget决定了你的library运行在哪个环境，哪个环境也就决定了你哪种模式去加载所引入的额外的包。
- 一般运行在浏览器环境的，libraryTarget可以不设置，默认模式是global（全局变量的模式加载所引入外部的库）。externals应该和libraryTarget保持一致。
libraryTarget取值var(默认)、assign、this、window、global、commonjs、commonjs2、amd、umd、jsonp
具体参考：https://blog.csdn.net/frank_yll/article/details/78992778
网友评论