Question

在最近发布的webpack 1.14.0 / karma 1.4.0 / karma-webpack 2.2.0之后，我现在看到很多这些消息，当karma启动它的webpack构建时。

webpack: wait until bundle finished:

有时我看到多达6-8个，他们似乎正在使构建时间更长。例如，这个：

Hash: 255562a2a96fffe34fae
Version: webpack 1.14.0
Time: 408ms
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
ts-loader: Using typescript@2.1.5 and C:\git\project\tsconfig.json

到目前为止，它还没有停止我的构建，但至少看起来有些东西现在已经锁定，即使是暂时的。其他人看到这个？我想清理它，如果它是我的结果，但正如我所说，我的配置文件没有改变，但现在已经出现了最近的karma / webpack系列产品的大量发布过去3周。

我的问题是：

这条消息是什么意思？
如何解决创建问题的方法？

Answer 1

karma-webpack将每个spec文件视为单独的入口点，并为每个文件生成一个单独的webpack包。因此，您的控制台日志很好，并不表示任何问题。

如果你想摆脱多个webpack: wait until bundle finished:输出，你可以在你的业力配置中禁用webpack-dev-middleware信息记录：

...

webpackMiddleware: {
  noInfo: true
},

...

阅读webpack-dev-middleware自述文件的自述文件中有关webpackMiddleware部分可能选项的完整列表的更多信息。

Answer 2

好。使用这个，看起来我找到了解决方案。

在我的案例中，问题出现在多个文件中，包括在Karma.conf

中

在我有文件配置之前

  const zooAnimals = ['anteater', 'bear', 'cheetah', 'donkey'];
  const subject = new Rx.Subject();

  const subscriber = subject
    .subscribe(
      onNext,
      function onError(err) {
        console.log('Error: ' + err);
      },
      function onCompleted() {
        console.log('no more animals!');
      }
    );

  function onNext(animal) {
    const list = document.querySelector('#animals');
    console.log('list', list)
    const li = document.createElement('li');
    li.innerHTML = animal;
    list.appendChild(li);
  }

  zooAnimals.forEach(animal => subject.onNext(animal));
  setTimeout(() => subject.onNext("giraffe"), 100);

看起来karma为包含的每个文件启动webpack编译，它需要一个内存（在测试之前保留编译的文件）。这就是为什么我们有内存泄漏和资源/时间问题。

所以我通过这个改变解决了这个问题：我在我的应用程序根目录中创建了一个testEntry文件（我希望Karma只能使用它并且它将仅触发webpack编译一次，对于此文件）并且它的工作原理与我预期的完全相同：）

files: [
            src/**/*.spec.js'
        ],
        preprocessors: {
            'src/**/*.spec.js': ['webpack']
        },

在这个文件中，我需要通过这种结构进行所有测试

files: [
            'src/__testsEntry__.spec.js'
        ],

这解决了我的问题，现在我只有一个文件的webpack编译。它提高了项目测试过程和pc资源的速度。

希望它有所帮助。最好的问候。

P.S。有一个包含报告的屏幕截图，用于证明每个测试套件都通过karma-spec-reporter显示为不同的组

以下是测试用例中只有一个捆绑过程的演示。

更新2：在此解决方案中，如果测试失败，调试存在一些问题，因为我们会在报告中看到 testEntry 文件的行号（不是原始文件）。因此，在找到其他可能的解决方案之前，我们可以使用测试套件的一些名称约定来增加理解 - 我们的测试失败的文件。

Answer 3

检查the for statement后，我发现您可以通过在karma.conf.js中指定以下内容来摆脱“｢wdm｣：等到捆绑包完成：noop”的输出（ options of webpack-dev-middleware部分）：

webpackMiddleware: {
  logLevel: 'error'
}

经过测试：

业力3.1.1
karma-webpack 3.0.5

Karma webpack输出多个“webpack：等到捆绑完成”

3 个答案: