Загрузите внешний файл html (в / sr c) с помощью html -loader и реагируйте на класс

Question

Я новичок в веб-пакете, и я попытался использовать html -loader для импорта файла html (в моей папке sr c) в класс реагирования в виде строки. Я хочу иметь возможность добавлять кнопки после документа stati c html, поэтому я не хочу напрямую использовать href для страницы. Мой текущий файл веб-пакета выглядит следующим образом:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/i,
        use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      }
    ]
  },
};

У меня есть файл с именем file. html в / sr c, который я хочу отобразить в файле класса. Я установил веб-пакет, попробовал npx webpack загрузить и правильно его собрать. Тогда я делаю import html from './file.html'. Однако, когда я запускаю свой сервер реакции, я получаю

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Я следовал за html документацией загрузчика, но все еще не могу найти свой ответ. Я также искал тонны кода на Github и Stack Overflow. Если загрузчик правильно используется при сборке, почему я не могу использовать свой файл html в React ...

Спасибо за любую помощь!