时间戳

首页 > 解决方案 > 如何覆盖 HtmlWebpackPlugin 生成的 src 标签？

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

问题描述

我的Webpack配置中有多个输出，名称中有一些哈希，这就是为什么我尝试利用HtmlWebpackPlugin自动生成为 SPA 应用程序提供服务的索引 HTML 文件的原因。到目前为止，一切都很好。

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

从：

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

至：

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

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

标签： webpackhtml-webpack-plugin

解决方案

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

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("$2") }}>')
            }
        )

    })
}

module.exports = HtmlWebpackLaravelAssetPlugin

推荐阅读