如何使用 React 和 WebPack 使 SourceMaps 适用于 1p 包？

Question

我们有一堆 1p（第一方）JS 包，它们用于 Web 和移动设备（React Native App）。我们注意到的一件事是源映射仅适用于基础包，不适用于 1p 包，因为它们是在编译时添加的节点依赖项。

1p 节点模块未作为源映射的一部分捕获我们如何单独为我们的包启用？我尝试使用https://www.npmjs.com/package/source-map-loader，但它不起作用并在编译时出错。

设置

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader

WebPack 配置

devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
      {
        test : /\.scss$/,
        use: {
          loader: 'sass-loader',
          options: {
            includePaths: ["./node_modules"]
          }
        }
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      }
    ]
  },

---

编辑 1

//https://www.typescriptlang.org/docs/handbook/compiler-options.html
{
  "compilerOptions": {
    "lib": ["es2016", "es6", "es5", "dom"],
    "declaration": true,
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    // Report errors for fallthrough cases in switch statement.
    "noFallthroughCasesInSwitch": true,
    // Report errors on unused locals.
    "noUnusedLocals": true,
    // Report errors on unused parameters.
    "noUnusedParameters": false,
    "moduleResolution": "node",
    // enabled to skip annoying issue with @types/react-native conflict with @types/node
    "skipLibCheck": true,
    "outDir": "es5",
    "experimentalDecorators": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "."
  },
  "include": ["src/**/*", "tst/**/*"],
  "exclude": ["build", "dist", "node_modules/**/*", "tst/**/*"]
}

Answer 1

很难说有可用的信息，但this.getOptions 一直是introduced with webpack 5，如果你的 webpack 版本仍然低于更新到版本 5 应该可以解决问题。