如何覆盖 HtmlWebpackPlugin 生成的 src 标签？

Question

我的 Webpack 配置中有多个输出，名称中有一些散列，这就是为什么我尝试利用 HtmlWebpackPlugin 来自动- 生成服务于 SPA 应用程序的索引 HTML 文件。到目前为止一切顺利。

但是，因为我使用带有模板引擎的 MVC 框架为 SPA 应用程序提供服务；我想让它决定资产的位置。这意味着，我必须修改 HtmlWebpackPlugin 放置的 <script> 标签，例如：

发件人：

<script type="text/javascript" src="public/js/app.js">

收件人：

<script type="text/javascript" src="{{asset('app.js')}}">

我阅读了文档并关注了列出的扩展，但没有成功。是否有任何未记录的方法来实现我想要做的事情？

Answer 1

我开发了一个插件来实现这一点。这是源代码：

function HtmlWebpackLaravelAssetPlugin(options) {}

HtmlWebpackLaravelAssetPlugin.prototype.apply = function (compiler) {
    compiler.plugin('compilation', (compilation) => {

        compilation.plugin(
            'html-webpack-plugin-after-html-processing',
            data => {
                data.html = data.html.replace(/(src\=\"public\/)(.*?)(\"\>)/gi, 'src={{ asset("") }}>')
            }
        )

    })
}

module.exports = HtmlWebpackLaravelAssetPlugin

如何覆盖 HtmlWebpackPlugin 生成的 src 标签？

How can I override the src tags generated by HtmlWebpackPlugin?

webpack

html-webpack-plugin