时间戳

首页 > 解决方案 > 如何处理 HTML 文件中的链接标签

webpack - 如何处理 HTML 文件中的链接标签

问题描述

我有一个带有单个 link元素的简单 HTML 文件。

<link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-free/css/all.css">

与身体

<body>
  <div class="container">
    <i class="fas fa-book-open"></i>
  </div><!-- container -->
</body>

在 all.css 的末尾有一个指向字体 ( url("../webfonts/fa-brands-400.woff2") format("woff2")) 的 URL，所以我也需要它们。我想使用 Webpack 以以下结构“构建”我的网站

dist
|
|--css
|  |--all.css
|--webfonts
|--|--fonts required by all.css
|--index.html

到目前为止，我的 webpack.config.js 看起来像这样：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  mode: 'development',
  target: 'web',
  output: {
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        type: "asset/resource",
        generator: {
          filename: "css/[name][ext]",
        },
      },
      {
        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/i,
        type: "asset/resource",
        generator: {
          filename: "webfonts/[name][ext]",
        },
      },
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          minimize: false,
        },
      },
    ],
  },
};

输出如下所示：

dist
|
|--css
|  |--all.css
|--index.html

如何配置 Webpack (5.36.2) 以正确处理 Urls 到字体？

标签： webpack

解决方案

推荐阅读