webpack系列-externals配置使用（CDN方式引入JS）

如果需要引用一個庫，但是又不想讓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）