file-loaderを使用してJSONファイルをサポートする方法

file-loaderのインストール: まず、プロジェクトにfile-loaderをインストールします。以下のコマンドを使用します。

npm install file-loader --save-dev

Webpackの設定: 次に、Webpackの設定ファイル（通常はwebpack.config.js）でfile-loaderを構成します。以下のように設定を追加します。

module.exports = {
  // ...他の設定
  module: {
    rules: [
      // ...他のローダーの設定
      {
        test: /\.json$/,
        use: 'file-loader',
      },
    ],
  },
};

上記の設定では、拡張子が.jsonのファイルに対してfile-loaderを使用するように指定しています。

コード内でJSONファイルの使用: 設定が完了したら、コード内でJSONファイルを使用できるようになります。以下は、JavaScriptコード内でJSONファイルをインポートする例です。

import jsonData from './path/to/file.json';
console.log(jsonData);

上記の例では、file.jsonを適切なパスに置き換えて使用します。JSONファイルは、Webpackによってバンドルされ、file-loaderによって適切な場所にコピーされます。

以上の手順に従うことで、file-loaderを使用してJSONファイルをサポートすることができます。これにより、JSONファイルがバンドルに含まれ、コード内で利用できるようになります。