尝试使用 webpack 和 TypeScript 构建多页应用程序时出现 MIME 类型错误

如何解决尝试使用 webpack 和 TypeScript 构建多页应用程序时出现 MIME 类型错误

我正在尝试使用 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')
);

我认为代码并不重要。但如果你需要它，我会及时更新我的问题。