在 TypeScript 中导入 JSON 不会导入内容，而是导入 URL

Question

我试图在 TypeScript 中导入 JSON 文件的内容，但我得到的不是 JSON 的内容，而是 URL.

App.tsx

import * as videosInfo from './videos-info.json'

console.log("Print");
console.log(videosInfo);

控制台输出：

Print
http://localhost:3000/src/videos-info.json

在tsconfig.json中我使用"resolveJsonModule": true。如何使用 JSON 的 contents 而不是其路径？

编辑：这是我的 webpack.config.js 供参考：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.json/,
        type: 'asset/resource',
        generator: {
          filename: '[name][ext][query]'
        }
      },
      { 
        test: /\.css$/, 
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'client.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './public/index.html',
      filename: 'index.html'
    })
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    },
    compress: true,
    port: 3000
  }
};

Answer 1

正如 @T.J. Crowder 正确建议的那样，问题来自我对 Webpack 5 中的 asset/resource 加载程序的误解。根据 documentation:

asset/resource emits a separate file and exports the URL. Previously achievable by using file-loader.

我的目标是在执行 npm run build 时将 videos-info.json 从 /src/ 复制到 /dist 文件夹中，这样我就可以在某个地方静态托管它并进行设置AWS Lambda 以定期覆盖它。因此，我不能通过 Webpack 加载 client.bundle.js 内部的 JSON，因为数据将被硬编码在包中。关于 Webpack 如何静态构建资源的注释帮助我更好地理解它：

因此我必须在Webpack 5中使用asset/resource加载器来生成一个URL，稍后我可以通过[=20]加载到网页中=] 例如：

const videosFile = require('./videos-info.json');
// videosFile is a URL

React.useEffect(() => {
  const resp = await fetch(videosFile);
  const data = await resp.json() as VideoResult;
  const videos: VideoResultItem[] = data.items;
}, []);

在 TypeScript 中导入 JSON 不会导入内容，而是导入 URL

Importing JSON in TypeScript does not import the contents but a URL

typescript

webpack