简介
glue-webpack-plugin 是一个用于简化 webpack 应用程序的模块内联的插件。它将模块的代码内联到生成的 JavaScript 文件中，从而减少了网络请求的次数和文件大小，提高了页面的加载速度。
安装
在项目目录下，使用 npm 安装 glue-webpack-plugin:
--- ------- ------------------- ----------
使用
在 webpack.config.js 中，引入 glue-webpack-plugin，并在 plugins 中配置：
----- ----------------- - -------------------------------
-------------- - -
-- -------
-------- -
--- -------------------
-- ---
---
-- -------
--
--配置项
glue-webpack-plugin 提供了丰富的配置项，以便你能够在不同的场景中使用。
glueOptions
参数类型：Object
配置项对象，用于定义内联代码的选项。
--- -------------------
------------ -
-- --
-
---常用选项如下：
include：匹配需要内联的模块，可以使用正则表达式或者字符串数组。exclude：匹配不需要内联的模块，可以使用正则表达式或者字符串数组。dependencies：定义内联代码时需要包含哪些依赖包的代码。limit：限制内联的模块的大小，如果超出这个大小，将不会被内联。
test
参数类型：RegExp | Array
匹配需要内联的文件的正则表达式或者字符串数组。
--- ------------------- ----- ------------- ---
exclude
参数类型：RegExp | Array
匹配不需要内联的文件的正则表达式或者字符串数组。
--- ------------------- -------- -------------- ---
inlineSource
参数类型：RegExp
匹配需要内联的源文件的正则表达式。
--- ------------------- ------------- ------------- ---
minify
参数类型：boolean
是否压缩内联的代码，默认为 true。
--- ------------------- ------- ---- ---
示例代码
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
--------------
-
-
-
--
-------- -
--- --------------------
--- -------------------
----- --------------
------------ -
-------- --------------
-------- ---------------
------ -----
--
------------- --------
--
-
--上述代码中，webpack 的入口文件为 ./src/index.js，输出文件为 dist/bundle.js。使用 babel-loader 对 JS 进行编译，使用 HtmlWebpackPlugin 自动生成 HTML 文件。最后引入了 glue-webpack-plugin 插件，并使用了其提供的多种配置选项。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e6e255dee6beeee7421