html_webpack_plugin_alter_asset_mount-stzhang
Advanced tools
微调 html-webpack-plugin 插件注入 script 标签在html模板内的位置
避免将单页应用程序SPA中所有脚本的<script>标签都一股脑地都放在<body>底部或<head>标签内。
<script>标签都放在<head>标签里会延长首页白屏时间。<script>标签都放在<body>底部也会延后一部分视觉敏感程序的初始化时间点。举例来讲，在px2rem尺寸计算方案中，
<html>标签font-size样式属性值的时间点放在开始渲染<body>标签内容之前，以避免内容大小的缩放闪烁。<body>渲染前执行以为px2rem做环境准备，另一部分在<body>后执行以缩短首页白屏时间”就更完美了。此webpack插件就是为了这个目标而生。
html_webpack_plugin_alter_asset_mount-stzhang给html-webpack-plugin插件添加了一个新配置项mount（这是一个选项对象）。html_webpack_plugin_alter_asset_mount-stzhang自身的构造函数也接受包含了mount配置项的配置对象。但是，它的优先级更低会被html-webpack-plugin插件配置项对象内的mount复写（不是合并）。html-webpack-plugin-alter-asset-tags插件事件。正是在这个事件的处理函数里：
mount。chunk脚本文件在html页中的注入位置。webpack.plugins插件数组内出现的位置不影响功能的正常运行html_webpack_plugin_alter_asset_mount-stzhang插件被罗列在html-webpack-plugin插件前/后都能正常地工作。
mount在html-webpack-plugin插件的构造函数参数里mount配置项会由html_webpack_plugin_alter_asset_mount-stzhang插件解析与使用。它的格式：
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'tmpl/index.html',
inject: true,
chunks: ['chunkId1', 'chunkId2'],
mount: { // 新配置项在这里。
chunkId1: { // chunk 名 或者 chunk id
js: 'body' | 'head', // 指定此 chunk 的脚本文件放在哪
css: 'body' | 'head' // 指定此 chunk 的样式文件放在哪
}
// 注意：chunkId2 没有出现在 mount 配置里。所以，`inject: true`
// 让把它的程序文件放在哪，就放在那。和`HtmlWebpackPlugin`插件
// 的原有行为保持一致。
}
})
chunkId的数据格式**在HtmlWebpackPlugin v3+中，**其的格式是{Chunk Id hint}~{Entry Point 1}~{Entry Point 2}~...
npm i -D html_webpack_plugin_alter_asset_mount-stzhang
const AlertAssetMount = require('html_webpack_plugin_alter_asset_mount-stzhang');
module.exports = {
// ...
plugins: [
new AlertAssetMount() // 上面配置中的 {mount: {chunkId1: {js, css}}} 配置对象
// 出现在构造函数参数里也是可以的。但，注意优先级更低
]
// ...
};
FAQs
微调 html-webpack-plugin 插件注入 script 标签在html模板内的位置
The npm package html_webpack_plugin_alter_asset_mount-stzhang receives a total of 1 weekly downloads. As such, html_webpack_plugin_alter_asset_mount-stzhang popularity was classified as not popular.
We found that html_webpack_plugin_alter_asset_mount-stzhang demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.