Javascript Webpack-devtool:CSS的源代码映射和JS的eval源代码映射？

如果我使用devtool:“源代码映射”，它与CSS配合使用效果很好：

但是，我的JavaScript变量名并不有趣：

因此，如果我使用devtool:eval源映射。生活是伟大的——调试JS。但是我的CSS指向大的CSS包，而不是单独的文件：

我怎么能既吃蛋糕又吃蛋糕？！ 我想在同一个构建过程中使用JS的eval源代码映射和CSS的源代码映射

这是我的网页配置（使用截至本文撰写时的最新版本）：

这似乎有效：

{
  ...webpackConfig,
  devtool: false,
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      test: /\.s?[ac]ss$/
    }),
    new webpack.EvalSourceMapDevToolPlugin({
      test: /\.(vue|[jt]sx?)$/
    }),
  ]
}

这将为您提供css、SCS和sass的内联源代码映射，以及vue、js、jsx、ts和tsx的评估源代码映射

{
  ...webpackConfig,
  devtool: false,
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      test: /\.s?[ac]ss$/
    }),
    new webpack.EvalSourceMapDevToolPlugin({
      test: /\.(vue|[jt]sx?)$/
    }),
  ]
}