Webpack构建Vue3+TS项目时Sourcemap无法断点问题求助

搭建Vue3+TS项目并使用Webpack构建，项目构建与webpack-dev-server运行正常，但存在以下问题：Chrome浏览器中能搜索到.vue目标文件，却无法设置断点（断点不触发）。

相关配置信息 #

webpack.config.js #

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode:'development',
  entry: './src/main.ts',
  output: {
    filename: 'dist.js',
    path: path.resolve(__dirname, 'dist')
   },
   module: {
      rules: [
         {
            test: /\.vue$/,
            loader: 'vue-loader'
         },
         {
            test: /\.css$/,
            use: [
               'style-loader',
               'css-loader'
            ]
         },
         {
            test: /\.tsx?$/,
            use: [
               {
                  loader: 'ts-loader',
                  options: {
                      configFile: path.resolve(__dirname, './tsconfig.json'),
                      appendTsSuffixTo: [/\.vue$/]
                  }  
               }
            ],
            exclude: /node_modules/,
          },
      ],
   },
   plugins: [
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ],
   devtool: 'inline-source-map',
   devServer: {

    },
};

tsconfig.json #

{
  "compilerOptions": {
    "rootDir": ".",
    "target": "ESNext",
    "sourceMap": true,
    "allowJs": true,
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noImplicitAny": false,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ],
    },
    "types": [
      "node",
    ],
  },
  
  "include": [
    "src/**/*.js", 
    "src/**/*.ts", 
    "src/**/*.d.ts", 
    "src/**/*.tsx", 
    "src/**/*.vue",
    "docs/**/*.ts",
    "docs/**/*.vue",
  ],
  "exclude": [
    "node_modules",
  ]
}

项目结构 #

解决方案 #

1. 更换Webpack devtool配置 #

inline-source-map在Vue单文件组件场景下容易出现映射错位，替换为开发环境更适配的选项：

devtool: 'eval-cheap-module-source-map'

该选项兼顾构建速度与源码映射准确性，能正确识别.vue文件的代码位置。

2. 修正tsconfig的rootDir #

当前rootDir: "."会导致TypeScript生成的source map包含非源码目录，改为指向源码根目录：

"compilerOptions": {
  "rootDir": "./src",
  // 保留其他原有配置
}

3. 优化Webpack输出路径映射 #

在output中添加devtoolModuleFilenameTemplate，确保source map的文件路径与实际源码路径一致：

output: {
  filename: 'dist.js',
  path: path.resolve(__dirname, 'dist'),
  devtoolModuleFilenameTemplate: '[resource-path]'
}

4. 确认.vue文件的Script标签配置 #

确保.vue文件的script标签明确指定TypeScript语言：

<script setup lang="ts">
// 组件代码
</script>

5. 同步依赖版本兼容性 #

确保vue-loader、@vue/compiler-sfc、ts-loader与Vue3、Webpack版本匹配，执行以下命令更新依赖：

npm install vue-loader@latest @vue/compiler-sfc@latest ts-loader@latest --save-dev

完成以上调整后，重启webpack-dev-server，即可在Chrome中正常设置并触发.vue文件的断点。

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