开发阶段如何配置Webpack/Vite加载第三方包的Sourcemap？

Webpack 配置方式 #

Webpack默认在开发模式下会跳过第三方库的Source Map解析，得手动调整配置：

• 先装依赖：npm install source-map-loader --save-dev
• 在项目根目录的webpack.config.js里添加以下配置：

  module.exports = {
    mode: 'development',
    devtool: 'eval-source-map', // 开发模式下该选项调试体验最优
    module: {
      rules: [
        {
          test: /\.js$/,
          include: /node_modules\/somelib/, // 仅针对需要调试的somelib库
          enforce: 'pre',
          use: ['source-map-loader'], // 用这个loader解析库的Source Map
        },
      ],
    },
  };
  

• 如果用的是脚手架（比如create-react-app），可能需要 eject 或者借助react-app-rewired修改配置，核心是给somelib加上source-map-loader的处理规则，避免Webpack忽略它的Source Map。

Vite 配置方式 #

Vite默认会对node_modules里的包做预构建且跳过Source Map处理，修改vite.config.js即可：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    sourcemap: true, // 必须开启，否则开发服务器不返回Source Map
    fs: {
      allow: ['./node_modules'], // 确保Vite能访问到库里的.map文件
    },
  },
  optimizeDeps: {
    exclude: ['somelib'], // 禁止Vite预构建该库，直接使用原文件的Source Map
  },
});

• 要是排除预构建后仍无效，可以尝试把server.sourcemap设为'inline'，强制将Source Map嵌入到代码中。

额外检查项 #

• 确认node_modules/somelib目录下确实存在somelib.js.map文件，且somelib.js末尾的sourceMappingURL路径正确（比如是否为./somelib.js.map，与实际文件位置匹配）。
• Chrome开发者工具中，需开启设置>实验性功能>启用JavaScript源映射，同时在Sources面板右上角菜单勾选显示忽略的内容——默认情况下node_modules的文件会被隐藏。

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