webpack-cli: Support VS Code problem matchers without custom configuration (i.e. out of the box)

Refs: https://github.com/webpack/webpack-cli/pull/2206 & https://github.com/webpack/webpack/issues/5895

Without any additional configuration, we would like to be able to support VS Code problem matchers for webpack builds (especially watch).

What They Are

VS Code problem matchers scrape terminal output to detect and surface compile/lint/etc issues in VS Code. These problem matchers allow VS Code to provide a richer build experience when using build tasks. These tasks can be (and often are) just package.json scripts run by npm or yarn, or they can be any other type of build system if it outputs usable information to the terminal. For example, many devs configure a default build task, and then when they press F5 to start debugging, the debugger waits until the build task completes successfully before launching. And warnings/errors (say from typescript/eslint/etc) are aggregated into the VS Code Problems view:

image

See the documentation for more information.

How They Work

A problem matcher is a regex patterns that are run against the terminal output, to capture warnings/errors and provide them to VS Code. See a simple sample here.

But a more advanced problem matcher is needed for background/watch tasks. For that we need to provide two more regex patterns, one to capture the start of the desired output and the end of it. So in with webpack that would be the start of a compilation and when the compilation completes.

What We Need

So to support these we need a reliable output that can be matched to provide a starting and ending point for a build/watch. A start & end message should be output for each webpack configuration that is run and ideally a start & end message for entire “run”.

We had these messages before https://github.com/webpack/webpack-cli/pull/2206 was merged, with the Compilation starting... & Compilation finished messages, and the additional Compilation [config-name] starting... & Compilation [config-name] finished when for each config in a multi-config setup

Also, here is the current TypeScript + Webpack Problem Matchers I maintain for VS Code. The relevant patterns are here: https://github.com/eamodio/vscode-tsl-problem-matcher/blob/687f20cd297b0eaa391e5f8776f8819f806f534f/package.json#L188-L196

And to be clear, I really don’t mind/care at all what the start/end messages are – just that they can be identified and used.

/cc @alexander-akait

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 28 (15 by maintainers)

Most upvoted comments

What about WEBPACK_CLI_LOG_LIFE_CYCLE?