本文主要是介绍webpack系列-externals配置使用（CDN方式引入JS），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 方式一：使用html-webpack-externals-plugin
- 方式二：直接配置externals
如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals。
这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包，不被打入bundle中，从而减少打包时间，但又不影响运用第三方库的方式，例如import方式等。
方式一：使用html-webpack-externals-plugin
首先npm 安装html-webpack-externals-plugin，如下代码：
npm i html-webpack-externals-plugin -D
在我们常用的webpack.base.conf.js中的进行配置，我们以CDN引入vue框架为例，让其不打包到vendor.js中，在webpack.base.conf.js的配置如下：
`const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
module.exports = { // 其它省略... plugins: [ new HtmlWebpackExternalsPlugin({ externals: [{ module: 'vue', entry: 'https://lib.baomitu.com/vue/2.6.12/vue.min.js', global: 'Vue' }] }) ], // 其它省略... }`
最后看到在index.html中动态添加了如下代码：
<script type="text/javascript" src="<https://lib.baomitu.com/vue/2.6.12/vue.min.js>"></script>
方式二：直接配置externals
首先在index.html中script标签引入JS，如下代码：
<script type="text/javascript" src="<https://lib.baomitu.com/vue/2.6.12/vue.min.js>"></script>
在webpack.base.conf.js的配置如下：
module.exports = { // 其它省略... externals: { vue: 'Vue' }, // 其它省略... }
参考地址：
- webpack 的externals配置
- webpack学习笔记—plugins（html-webpack-externals-plugin）
这篇关于webpack系列-externals配置使用（CDN方式引入JS）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
