简介
在前端开发中，Webpack 是一个非常重要的工具。Webpack 能够将各种类型的资源如 JavaScript、CSS 和图片等，以及依赖关系进行打包，从而方便的进行完整的部署。@vxna/mini-html-webpack-template 是一个针对 Webpack 的模板插件，它提供了一些便捷的配置，能够帮助开发者在不需花费太多时间配置的情况下，快速完成前端项目的开发。
安装
通过 npm 安装 @vxna/mini-html-webpack-template：
npm install @vxna/mini-html-webpack-template
使用
在 Webpack 配置文件中进行配置，使用 @vxna/mini-html-webpack-template 插件，在插件数组中添加 miniHtmlWebpackPlugin 即可。
-- -------------------- ---- -------
----- --------------------- - --------------------------------------------
-------------- - -
-- ---
-------- -
--- -----------------------
--- ------------
--------- ------------
--
-
-- ---
--此时只需要运行 Webpack，就能在输出路径中得到针对特定模板的 HTML 文件。
详细设定
属性
js
- 类型: string
- 默认值: 无
输出的 JS 文件名称。若提供了 path ，可以为 path + js 文件名称。
css
- 类型: string
- 默认值: 无
输出的 CSS 文件名称。若提供了 path ，可以为 path + css 文件名称。
filename
- 类型: string
- 默认值: index.html
渲染出来的 HTML 文件名称。
rules
- 类型: array
- 默认值: []
提供一些设定样式规则的选项。规则中的使用请遵循 CSS 规则样例。
"{ rules: [
{ test: /\\.txt$/, use: 'raw-loader' },
{ test: /\\.css$/, use: ['style-loader', 'css-loader'] }
]}";例子
下面的例子设置了 JS 与 CSS 文件名，设定输出 HTML 文件名为 test.html，并定义了一个 raw-loader 的规则用于加载 HTML 文件。
-- -------------------- ---- -------
----- --------------------- - --------------------------------------------
-------------- - -
-- ---
-------- -
--- -----------------------
--- -----------------------
---- ------------------------
--------- ------------
------ -
- ----- ---------- ---- ------------ --
-
--
-
-- ---
--总结
@vxna/mini-html-webpack-template 插件为做前端开发的开发者提供了便捷的模板配置选项，而且使用也十分简单，掌握后能够帮助开发者快速地完成前端项目开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc0fcb5cbfe1ea0611cf9