webpack html文件link css 绝对路径

发布于 2022-09-11 22:08:28 字数 1152 浏览 27 评论 0

我在尝试一个多页面的时候，写了2个组件，里面包含index.html | style.css | index.js，对于 JS 文件，我可以通过插件和 entry 入口去解决引用问题。

但是对于 CSS 文件，我这里2个组件，分别使用的是 JS 中引入require('./style.css') 和直接在 HTML 中link src="./style.css"，通过require引入的 CSS 通过 Mini 插件能引入，另一个组件打包后的 HTML 文件中，仍然存在 link src="./style.css"，而此时打包路径已经变了，因此会引入失败。

请问一下通过link scr="./style.css"的 CSS 文件是如何打包的，保证能正常引用?

打包后的 HTML 文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BAR</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="hello">Hello BAR!</div>
    <div id="test">BAR 页面</div>

    <textarea name="" id="" cols="30" rows="10">
        输入BAR
    </textarea>
<script type="text/javascript" src="../js/bar.c724a7f5b19aaaf30e5b.js"></script></body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

把回忆走一遍 2022-09-18 22:08:28

通过 html-webpack-plugin 的模板参数修改css路径试一下：

// webpack.config.js
plugins: [
  new htmlWebpackPlugin({
    filename: 'index.html',
    template: path.join(__dirname, '../src/index.html'),
    templateParameters: {
      'path': './style.css'
    },
  }),
],

html模板：

<link rel="stylesheet" href=<%= path %>>

回复收藏 0

世界等同你 2022-09-18 22:08:28

我也遇到这个问题，我试着按照文档的html-loader来处理link，但是会报错，window is not defined 或者 document is not defined，设置了globalObject: 'this',处理了window，document还是没处理完，均提示jquery中这两个报错，使用html-withimg-loader来处理<img ，以为<link会跟着处理，但是link里的src没有变化，还是打包前的路径，实在不知道怎么处理了...

回复收藏 0

~没有更多了~