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-webpac