Webpack Dev Server加载TS脚本报错：MIME类型video/mp2t不可执行

问题描述 #

本地开发使用Webpack+Webpack Dev Server，入口设置为HTML文件，服务器运行正常，HTML与CSS加载无误，但HTML中通过script标签引入的TypeScript文件无法加载，Chrome控制台报错：

Refused to execute script from 'http://10.100.102.10:8080/b2719c17562cf8ee.ts' because its MIME type ('video/mp2t') is not executable.

问题根源 #

1. 入口配置逻辑错误：将HTML设为Webpack入口，导致TS文件未被纳入打包流程，浏览器直接请求原始TS文件，但Dev Server无法正确识别.ts文件的MIME类型，错误标记为video/mp2t，浏览器因此拒绝执行。
2. 浏览器本身限制：即使MIME类型正确，浏览器也无法直接解析运行TypeScript代码，必须经过Webpack转译为JavaScript后才能执行。

解决方案 #

1. 调整Webpack入口为TypeScript文件 #

将Webpack的入口从HTML文件改为项目的主TS文件，让Webpack自动处理TS的转译与打包。

修改webpack.common.js中的entry配置：

// 原配置
entry: path.resolve(__dirname, '../products/products.html'),    

// 修改后（替换为你的实际主TS文件路径）
entry: path.resolve(__dirname, '../products/main.ts'),

2. 移除HTML中对TS文件的直接引用 #

HtmlWebpackPlugin会自动将Webpack打包后的JS文件注入到生成的HTML中，因此需要删除HTML里手动添加的<script src="xxx.ts"></script>标签。

3. 补充tsconfig.json配置（必填） #

ts-loader依赖tsconfig.json编译TypeScript，在项目根目录创建该文件，基础配置示例：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node"
  },
  "include": ["src/**/*"] // 替换为你的TS文件所在目录
}

4. 补充Webpack的resolve配置 #

在webpack.common.js中添加resolve配置，让Webpack自动识别.ts文件扩展名：

module.exports = {
    // 其他配置...
    resolve: {
        extensions: ['.ts', '.js']
    },
    // 其他配置...
}

修改后的完整webpack.common.js示例 #

const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

module.exports = {
    entry: path.resolve(__dirname, '../products/main.ts'), // 替换为实际主TS文件路径
    output:
    {
        hashFunction: 'xxhash64',
        filename: 'bundle.[contenthash].js',
        path: path.resolve(__dirname, '../../dist')
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['.ts', '.js']
    },
    plugins:
    [
        new CopyWebpackPlugin({
            patterns: [
                { from: path.resolve(__dirname, '../../assets') }
            ]
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../products/products.html'),
            minify: true
        }),
        new MiniCSSExtractPlugin()
    ],
    module:
    {
        rules:
        [
            // HTML
            {
                test: /\.(html)$/,
                use:
                [
                    'html-loader'
                ]
            },

            // JS
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:
                [
                    'babel-loader'
                ]
            },

            // TS
            {
                test: /\.ts$/,
                exclude: /node_modules/,                
                use:
                [
                    'ts-loader'
                ]
            },
            // CSS
            {
                test: /\.css$/,
                use:
                [
                    MiniCSSExtractPlugin.loader,
                    'css-loader'
                ]
            },

            // Images
            {
                test: /\.(jpg|png|gif|svg)$/,
                type: 'asset/resource',
                generator:
                {
                    filename: 'assets/images/[hash][ext]'
                }
            },

            // Fonts
            {
                test: /\.(ttf|eot|woff|woff2)$/,
                type: 'asset/resource',
                generator:
                {
                    filename: 'assets/fonts/[hash][ext]'
                }
            }
        ]
    }
}

内容的提问来源于stack exchange，提问作者user1612004