介绍
html-webpack-auto-inject-plugin 是一个 Webpack 插件,可以自动将打包好的 JS 文件和 CSS 文件注入到 HTML 文件中,方便前端开发者快速部署页面。
安装
在项目中安装 html-webpack-auto-inject-plugin:
--- ------- ---------- -------------------------------
使用方法
- 在 Webpack 配置文件中引入 html-webpack-auto-inject-plugin:
----- ----------------- - ------------------------------- ----- --------------------------- - ------------------------------------------- -------------- - - -- ----- -------- - --- ------------------- --------- ---------------- --- --- ----------------------------- -- --
- 在 HtmlWebpackPlugin 插件的配置项中添加 autoInject 属性:
--- ------------------- --------- ----------------- ----------- ---- ---
配置项
html-webpack-auto-inject-plugin 的默认配置项如下:
- -- --------- --- ----- ---- --- -------------- ----- -- --------- -- ----- ---- --- ------------- ----- -- --- -- ---------- ----------- ------ ----- ------------ ------ -- --- -- --------- ----------- ---- ----------- - ------------ ----------------- ---------- -- -- -- -------------- ----------- ---------- -- -- -- ------- ---- -------- -------- ---------- -- -- -- ------- ---- -------- -------- ---------- -- -- -- ------------ ------------- ---------- -- -- -- ------------ ------------ --------- -
示例
以 Vue.js 项目为例,配置 html-webpack-auto-inject-plugin 插件:
----- ----------------- - ------------------------------- ----- --------------------------- - ------------------------------------------- -------------- - - -- ----- -------- - --- ------------------- --------- ----------------- ----------- ---- --- --- ----------------------------- ------------- ------ ----------- --------------------------- -- -- --
在 HTML 文件中添加 script 标签:
--------- ----- ----- ---------- ------ ----- ---------------- --------- ----------- ------- ------ ---- --------------- ---- -------- ------ -- --- ------- ----------------------------------------- ------- --------------------------------- ------- -------
运行 webpack 命令进行打包,会生成以下内容:
--------- ----- ----- ---------- ------ ----- ---------------- --------- ----------- ---- --- ------------------------------- --- ------ -- --- ------- ----------------------------------------- ------- --------------------------------- ------- ------ ---- --------------- ------- -------
可以看到,html-webpack-auto-inject-plugin 已经自动添加了我们需要的 script 标签,方便我们进行部署和开发。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/62210