htmlwebpackglup - webpack 插件HtmlWebpackPlugin配置問題

查看:117
本文介绍了htmlwebpackglup - webpack 插件HtmlWebpackPlugin配置問題的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

配置代碼

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'www/index.html',
      inject: true,
      chunks: ['index','manifest','vendor'],
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
    })

插入后代碼,插入后的代碼是絕對路勁,怎麽調整為相對路徑
配置代碼效果

<html>

    <head>
        <meta charset=utf-8>
        <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name=apple-mobile-web-app-capable content=yes>
        <meta name=apple-mobile-web-app-status-bar-style content=black>
        <link href=/static/css/index.c7b44a78814ecafda35f58784609e1af.css rel=stylesheet>
    </head>

    <body>
        <script type=text/javascript src=/static/js/manifest.fbb49042b23710e35851.js></script>
        <script type=text/javascript src=/static/js/vendor.86fada0c2baad29021e8.js></script>
        <script type=text/javascript src=/static/js/index.86db0e5c40c094ba920a.js></script>
    </body>

</html>

想要的最終效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset=utf-8>
        <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name=apple-mobile-web-app-capable content=yes>
        <meta name=apple-mobile-web-app-status-bar-style content=black>
        <link href=./static/css/index.c7b44a78814ecafda35f58784609e1af.css rel=stylesheet>
    </head>

    <body>
        <script type=text/javascript src=./static/js/manifest.fbb49042b23710e35851.js></script>
        <script type=text/javascript src=./static/js/vendor.86fada0c2baad29021e8.js></script>
        <script type=text/javascript src=./static/js/index.86db0e5c40c094ba920a.js></script>
    </body>

</html>

解决方案

publicPath 默认是 '/'

把publicPath改成 './' 就行了

这篇关于htmlwebpackglup - webpack 插件HtmlWebpackPlugin配置問題的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆