0

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

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

4

0 回答 0