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