webpack打包优化：cdn资源引入+ webpack externals配置

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

最后编辑于：2019.02.25 13:58:22

webpack打包优化：cdn资源引入+ webpack externals配置

推荐阅读更多精彩内容