如何将 webpack DLL 注入现有的 HTML？答案

【问题标题】：How to inject a webpack DLL into an existing HTML?如何将 webpack DLL 注入现有的 HTML？
【发布时间】：2017-12-20 13:13:52
【问题描述】：

首先，使用 webpack.DllPlugin 生成 vendor.dll.js。

其次，使用 html-webpack-include-assets-plugin 将 vendor.dll.js 插入到由 HtmlWebpackPlugin 生成的 html 中。像这样：

new HtmlWebpackPlugin(),
new webpack.DllReferencePlugin({
     context: __dirname,
     manifest: require('./vendor-manifest.json')
})
new HtmlWebpackIncludeAssetsPlugin({
     assets: ['vendor.dll.js'],
     hash: true,
     append: false,
})

问题：

如何在不使用 html-webpack-plugin 的情况下将 vendor.dll.js 插入现有的 html 中？

谢谢

【问题讨论】：

您正在尝试做的是脚本注入。您可以通过浏览器控制台轻松完成。如果您想自动注入，则需要查看浏览器扩展，例如 chrome 扩展。
Ji，认为你误解了这个问题，或者我可能是 - 我假设 OP 只是想将包包含在他们自己的 HTML 文件中

标签： javascript webpack dllplugin

【解决方案1】：

由 webpack 构建创建的供应商包是本地文件系统上的 JavaScript 文件，就像 webpack 创建的任何其他包一样，因此您可以像任何其他 JavaScript 文件一样将其包含在现有 HTML 页面中 - 使用脚本标签.

<script src="vendor.dll.js"></script>

（请注意，实际路径取决于您的本地设置，我对此一无所知）

【讨论】：

对不起，我没有把问题说清楚。实际上，vendor.dll.js 的名称就是这样生成的：'[name]_[hash]'。所以名字可能会改变。我只是想知道 webpack 是否可以帮助我自动将此脚本注入到现有的 html 中。顺便说一句，感谢您的回复。
我有同样的问题，注入脚本的名称并不总是相同的，因为“哈希”。那么我们如何在构建时自动执行此操作？