typescript - Webpack と TypeScript を使用してマルチページ アプリをビルドしようとすると MIME タイプ エラーが発生する

Question

TypeScript を使用して複数ページのアプリを構築しようとしており、webpack をいじって、TypeScript と SCSS をトランスパイルし、HTML にリンクし、すべてを出力フォルダーに移動しています。

ファイルを適切にコンパイルして HTML にロードします。しかし、コンパイルされた TS を JS ファイルにパッケージ化していないようです。

Refused to execute script from 'http://localhost:8000/c108951b472f9e4eb8bc.ts' because its MIME type ('video/mp2t') is not executable.

たぶん、私はwebpackの全体的な考えを間違っていたのかもしれません。広範な検索の結果、必要なデザインに到達するための別のツールを見つけることができませんでした.

私のwebpack.config.jsonは次のとおりです。

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { merge } = require('webpack-merge');

const page = (title) => ({
  plugins: [
    new HtmlWebpackPlugin({
      title,
      filename: `pages/${title.toLowerCase()}/${title.toLowerCase()}.html`,
      template: `./app/pages/${title.toLowerCase()}/${title}.html`,
    }),
  ],
});

module.exports = merge(
  {
    mode: 'development',
    entry: './app/app.ts',
    output: {
      filename: 'app.js',
      path: path.resolve(__dirname, '../static'),
    },
    plugins: [
      new CleanWebpackPlugin(),
      new MiniCssExtractPlugin(),
      new HtmlWebpackPlugin({
        template: './app/index.html',
      }),
    ],
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: ['ts-loader'],
          exclude: /node_modules/,
        },
        {
          test: /\.scss$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
        },
        {
          test: /\.html$/,
          use: ['html-loader'],
        },
      ],
    },
    devServer: {
      port: 8000,
    },
  },
  page('Editor')
);

コードは関係ないと思います。しかし、必要な場合は、すぐに質問を更新します。