包含html-webpack-externals-plugin的词条

html-webpack-externals-plugin简介

=================================

html-webpack-externals-plugin是一个Webpack插件，它可以将外部依赖库（external libraries）从构建过程中提取出来，并以标签(script或link)的形式在生成的HTML文件中引入。

多级标题

-------

### 安装

首先，我们需要在项目中安装html-webpack-externals-plugin插件。可以通过npm包管理器来安装：

```bash

npm install html-webpack-externals-plugin --save-dev

```

### 使用

在Webpack配置文件中添加以下代码：

```javascript

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

module.exports = {

// ...

plugins: [

new HtmlWebpackExternalsPlugin({

externals: [

{

module: 'jquery',

entry: 'https://cdn.jsdelivr.net/jquery/latest/jquery.min.js',

global: 'jQuery',

},

],

}),

],

};

```

在上述示例中，我们引入了一个叫做"jquery"的外部依赖库，并指定了它的远程地址和在全局作用域中的名称。这将会使得在生成的HTML文件中自动插入一个引入jQuery的标签。

如果我们还想引入其他的外部依赖库，只需要将它们添加到externals数组中即可。例如，可以通过以下方式引入Bootstrap：

```javascript

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

module.exports = {

// ...

plugins: [

new HtmlWebpackExternalsPlugin({

externals: [

{

module: 'jquery',

entry: 'https://cdn.jsdelivr.net/jquery/latest/jquery.min.js',

global: 'jQuery',

},

{

module: 'bootstrap',

entry: 'https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.bundle.min.js',

global: 'bootstrap',

},

],

}),

],

};

```

### 详细说明

html-webpack-externals-plugin插件的作用是将外部依赖库从Webpack构建过程中分离出来，以减小构建文件的体积和提高加载速度。

在上述的示例中，我们通过指定外部依赖库的模块名（module）、远程地址（entry）和全局变量名（global）来引入它们。插件会根据这些配置自动在生成的HTML文件中插入对外部依赖库的引用标签。

另外，插件还支持其他配置选项，例如exclude属性可以用来排除特定的模块不被插件处理。更多关于html-webpack-externals-plugin的使用和配置信息，请查阅官方文档。