npm installしたパッケージの使い方が合っているか確認して欲しい

前提

以前、css-wipeというハード系のリセットcssについての質問をさせていただいた者です。

試行錯誤の結果、目標としていた結果は得られたのでリファクタリングも含めて質問させていただきます。
使うビルドツールは『webpack』になります。

実現したいこと

第１目標：ハード系リセットCSSであるcss-wipeをHTMLに適用させたい。（成功）
第２目標：適用させる過程の中で生まれた疑問点を解消させたい。（イマココ）

該当のソースコード

以下 webpack.config.js の中身となります。

const path = require('path');

module.exports = {
  entry: './src/my-main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: "production",
  
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              url: false,
            }
          }
        ]
      }
    ]
  },
  target: ["web", "es5"],
};

　　
my-main.js の中身が以下になります。

require('css-wipe');

　
css-wipeの package.json の中身が以下になります。

{
  "name": "css-wipe",
  "version": "4.3.0",
  "description": "Reset the browser's styles",
  "main": "index.css",
  "repository": "yoshuawuyts/css-wipe",
  "keywords": [
    "reset",
    "css",
    "sheetify",
    "cssnext"
  ],
  "license": "MIT",
  "scripts": {}
}

説明

結論から言えば、css-wipeはモジュールというよりは「リセットcssが同梱されたパッケージ」のようなものでした。
css-wipeの package.json の中身を見てみると、main プロパティに index.css（リセットCSSの中身）が指定されており、name プロパティが css-wipe となっていたので、requier('css-wipe') で呼び出すと自動的にリセットCSSの中身がオブジェクトとして取り出せる仕様になっていることに気づきました。

なので、my-main.js の中でcss-wipeを呼び出し、 css-loader パッケージを利用してJavaScriptの中でもcssを利用できるように変換し、次に style-loader で index.html のhead要素内に <style> タグを動的に差し込むことで何とか実現させることができました。

疑問点

一応できたはできたのですが、リセットCSSひとつ適用させるための手間としては少し冗長な気がし、これで合っているのかという疑惑も拭えておらず、また本来css-wipeというパッケージはどのような使用方法が想定されているのかも理解できていません。
（わかる方がいれば教えていただきたいです。）

また、単に読み込むべきCSSファイルがわかったのなら index.html から直接「css-wipeの index.css を読み込めばいいのではないか？」という考えもよぎりましたが、以前「npmの中身を直接HTMLから呼ぶことはしない」と教えて貰ったのでその方法はないかなと思い、却下いたしました。