Karma webpack outputting multiple "webpack: wait until bundle finished"

Question

After the recent releases of webpack 1.14.0 / karma 1.4.0 / karma-webpack 2.2.0, that I now see a lot of these messages when karma starts its webpack build.

webpack: wait until bundle finished:

Sometimes I see as many as 6-8 of them and they seem to be making the build longer. For example, this:

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 [email protected] and C:\git\project\tsconfig.json

So far, it hasn't stopped my build, but at the very least it seems like something is now locking up, if even temporarily. Anyone else seeing this? I'd like to clean this up if it is something on my end, but as I say, my config files haven't changed, yet this has now appeared with the recent flood of releases from the karma/webpack family of products in the last 3 weeks.

My questions are:

1. What does this message mean?
2. What can be done to fix the issue creating them?

Solution 1

karma-webpack treats every single spec file as separate entry point and produces a separate webpack bundle for each. Thus your console logs are just fine and do not indicate any issues.

If you want to get rid of the multiple webpack: wait until bundle finished: outputs you can disable webpack-dev-middleware info logging in your karma config:

...

webpackMiddleware: {
  noInfo: true
},

...

Read more about the complete list of possible options for the webpackMiddleware section in the readme of the webpack-dev-middleware package.

Solution 2

Okay. Worked with this and looks like I found a solution.

In my case issues was in multiple file including in the Karma.conf

Before I had this files configuration

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

looks like karma launch a webpack compilation for every file that was included and it takes a memory (to keep a compiled filed before tests). So that's why we have a memory leak and resource/time issue.

So I resolved this issue by this changes: I created an one testEntry file in my app root (I expect that Karma will be working only with it and it will trigger the webpack compilation only once, for this file) and it works exactly like I expected :)

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

In this file I required all tests via this construction

const req = require.context("./", true, /.+.spec.js/igm);
req.keys().forEach(function(key) {
    req(key);
});

This resolved my issue and now I have only one webpack compilation for one file. It increased speed of project test process and pc resources.

Hope it helps. Best regards.

P.S. There is a screenshot with a report to demonstrate that every test suite showed like a different group via karma-spec-reporter

Here is a demonstration of only one bundling process in the test case.

Update 2: In this solution some issue exists with debug in case of test failing, because we will see in the a report a line number of our testEntry file (not an original file). So till we find an other possible solution we can use some name conventions of your test suites to increase understanding - in which file our test was failed.

Solution 3

After checking the options of webpack-dev-middleware, I found out that you can get rid of the "｢wdm｣: wait until bundle finished: noop" output by specifying the following in your karma.conf.js (right below the reporters section):

webpackMiddleware: {
  logLevel: 'error'
}

Tested with:

• karma 3.1.1
• karma-webpack 3.0.5