在react中为bootstrap字体配置webpack

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      // ...其他加载器配置
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  }
};

import React from 'react';
import './MyComponent.css';

const MyComponent = () => {
  return (
    <div className="my-component">
      <h1>Hello, World!</h1>
    </div>
  );
};

export default MyComponent;

@font-face {
  font-family: 'BootstrapFont';
  src: url('../assets/fonts/bootstrap-font.woff2') format('woff2'),
       url('../assets/fonts/bootstrap-font.woff') format('woff');
}

.my-component {
  font-family: 'BootstrapFont', sans-serif;
}