webpack打包文件生成的source-map，映射错误？

Question

webpack编译sass，ts等文件生成的映射是将打包完成之后的文件映射出来了，并没有将sass，ts源文件映射,
在之前还一直没有问题，今天忘记添加了个什么配置，就突然成了这样子
之后我又重新搭了个简易架子，运行没问题，映射也没问题，是我哪里配置出问题了吗？

这是源文件

这是浏览器显示的映射文件

这是webpack .config,js

```javascript
const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    render: "./src/js/render.ts",
    main: "./src/main.js",
  },
  // content:require(path.resolve(__dirname)),
  resolve: {
    extensions: [".js", ".json", ".ts"],
    alias: {
      "@": path.resolve("src"),
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
            },
          },
          "css-loader",
          {
            loader: "px2rem-loader",
            options: {
              remUnit: 108,
              remPrecision: 3,
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
            },
          },
          "css-loader",
          {
            loader: "px2rem-loader",
            options: {
              remUnit: 108,
              remPrecision: 3,
            },
          },
        ],
      },
      {
        test: /\.ts$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
          "ts-loader",
        ],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: "asset",
        generator: {
          filename: "image/[name]_[hash:6][ext]",
        },
        parser: {
          dataUrlCondition: {
            // 最大 10KB
            maxSize: 1 * 1024,
          }
        }
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin({
    filename:'[name].bundle.css'
  })],
};

这是webpack.dev.js

const { merge } = require("webpack-merge");
const conf = require("./webpack.config.js");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
const path = require("path");
const fs = require("fs");
module.exports = merge(conf, {
  mode: "development",
  output: {
    path: path.resolve(__dirname, ""),
    filename: "[name].bundle.js",
  },
  target: "web",
  stats: "errors-only",
  devtool: "source-map",
  plugins: [
    new webpack.HotModuleReplacementPlugin({}),
    new webpack.ProgressPlugin({}),
    // new webpack.SourceMapDevToolPlugin({
    //   test:['js','scss','ts','css'],
    //   include:['./src/scss']
    // }),
    new HtmlWebpackPlugin({
      template: "src/views/index.html",
      filename: "index.html",
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "src/views/enter.html",
      filename: "enter.html",
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "src/views/voice.html",
      filename: "voice.html",
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "src/views/news.html",
      filename: "news.html",
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "src/views/newsDetails.html",
      filename: "newsDetails.html",
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "src/views/area.html",
      filename: "area.html",
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "src/views/culture.html",
      filename: "culture.html",
      inject: "body",
    }),
    new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: [`Your application is running here: http://localhost:9000`],
      },
      clearConsole: true,
    }),
    new webpack.DefinePlugin({
      baseUrl: JSON.stringify("api"),
    }),
  ],
  devServer: {
    port: 9000,
    open: true,
    compress: true,
    contentBase: path.join(__dirname, "src"),
    watchContentBase: true,
    hot: true,
    proxy: {
      "/api": {
        target: "http://localhost:9001",
        pathRewrite: { "^/api": "" },
        changeOrigin: true,
      },
    }
  },
});

Answer 1

你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答


本次提问扣除的有问必答次数，将会以问答VIP体验卡（1次有问必答机会、商城购买实体图书享受95折优惠）的形式为您补发到账户。


​​因为有问必答VIP体验卡有效期仅有1天，您在需要使用的时候【私信】联系我，我会为您补发。