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）