Karma 和 Webpack 中的 SourceMapping 应用程序代码答案

【问题标题】：SourceMapping Application Code in Karma and WebpackKarma 和 Webpack 中的 SourceMapping 应用程序代码
【发布时间】：2025-12-15 12:35:09
【问题描述】：

这是一个 Angular 1.x 应用程序，我们使用 Webpack 进行打包，使用 Karma 进行测试。我们使用“inline-source-map”作为我们的开发工具，当我们为应用程序提供服务时它运行良好。在我们的 Karma Config 中，我们使用“Karma-sourcemap-loader”插件，我们在 chrome 开发工具中看到我们的测试代码的原始格式，但应用程序代码本身不可读。

这是我们 KarmaConfig 中的相关部分

basePath: '',
frameworks: ['mocha'],
preprocessors: {
  'test/**/*.js': ['webpack', 'sourcemap'],
  'app/scripts/**/*.js': ['coverage']
},
files: [
  '*/build-plugin/polyfills/*.js'
],
webpack: webpackTestConfig,

这是相关部分的 webpack 配置。

devtool: 'inline-source-map',
plugins: [
  new webpack.ProvidePlugin({
    _: "underscore",
    jQuery: 'jquery',
    this: {}
  }),
  new BowerWebpackPlugin({
    searchResolveModulesDirectories: false
  }),
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin({
    minimize: true
  })
],

【问题讨论】：

你解决过这个问题吗？我遇到了同样的问题。

标签： webpack source-maps karma-mocha

【解决方案1】：

问题出在 Isparta 加载程序上。我们将 karma 入口点更改为单个文件，而不是 glob 模式。

https://github.com/deepsweet/isparta-loader/issues/1

【讨论】：