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')
);

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

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

0 个答案: