question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

webpack-dev-server compiles twice on startup

See original GitHub issue

Bug report

What is the current behavior?

It seems like that the watcher does not work correctly with inline entries like in the following webpack config:

module.exports = {
  entry: {
    main: "./src/index.js",
    inline: "data:text/javascript,"
  },
  mode: "development",
};

Based on the findings of @pvdstel it marks the inline script to be removed and therefore triggers a second compilation.

If the current behavior is a bug, please provide the steps to reproduce.

Use the webpack config above and start the webpack-dev-server locally or open this codesandbox which shows the following result:

webpack_5_double_compilation_-_CodeSandbox

As you can see watcher.on("initial-missing" triggers because webpack watches inline data: entries:

DevTools_-_Node_js

What is the expected behavior?

The compilation should only trigger once.

Other relevant information:

webpack: “5.11.1”, webpack-cli: “4.3.0”, webpack-dev-server: 4.0.0-beta.0

node: v10.23.0

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:9
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
sokracommented, Dec 30, 2020

webpack should not pass data urls to watchpack. This need to be fixed in webpack

2reactions
jantimoncommented, Dec 30, 2020

I created a fix which prevents the double compilation here: https://github.com/webpack/watchpack/pull/186

The fix is directly added to watchpack - can you please take a look if that’s a reasonable approach?

Read more comments on GitHub >

github_iconTop Results From Across the Web

webpack-dev-server runs twice - Stack Overflow
In your project folder, run npm uninstall webpack-dev-server . I had same issue on fresh project with webpack-dev-server v2.9.1, ...
Read more >
How We Reduced Startup Time by 80% With Webpack
Learn how the RudderStack Engineering team got rid of overhead from Typescript using webpack, reducing startup time to improve developer ...
Read more >
DevServer - webpack
See here for an example of how to use webpack-dev-server through the Node.js API. warning. You cannot use the second compiler argument (a...
Read more >
Using webpack with TypeScript - LogRocket Blog
Learn how to use webpack to compile TypeScript to JavaScript and ... -y npm install -D webpack webpack-cli ts-loader webpack-dev-server> ...
Read more >
webpack Tutorial: How to Set Up webpack 5 From Scratch
the webpack-dev-server command is now webpack-serve; file-loader , raw-loader and ... what file or files webpack will look at to compile.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found