What could be causing me to receive two builds when using Webpack?

Question

What could be causing me to receive two builds when using Webpack?

I am trying to capture the hash of the build by using a callback function in webpack:

const compiler = webpack(webpackConfig, function (err, stats) {
  debug("Hash", stats.hash)
})

However, I am encountering an issue where two builds are generated and only one hash can be captured from within the callback. I need to access the other hash instead.

Here is the output with a callback function:

app:server Hash +7s ea34c7a4d34baae1c353
webpack built d796ba7633cf5b1023a0 in 6673ms
Hash: ea34c7a4d34baae1c353
Version: webpack 1.13.1
Time: 6649ms
Asset       Size  Chunks             Chunk Names
app.ea34c7a4d34baae1c353.js    1.27 MB       0  [emitted]  app
1.counter.ea34c7a4d34baae1c353.js     247 kB       1  [emitted]  counter
vendor.ea34c7a4d34baae1c353.js     389 kB       2  [emitted]  vendor
app.ea34c7a4d34baae1c353.js.map    1.54 MB       0  [emitted]  app
1.counter.ea34c7a4d34baae1c353.js.map     303 kB       1  [emitted]  counter
vendor.ea34c7a4d34baae1c353.js.map     466 kB       2  [emitted]  vendor
favicon.ico    24.8 kB          [emitted]
index.html  595 bytes          [emitted]
Child html-webpack-plugin for "index.html":
Asset    Size  Chunks       Chunk Names
index.html  553 kB       0
webpack: bundle is now VALID.
  Hash: d796ba7633cf5b1023a0
Version: webpack 1.13.1
Time: 6673ms
Asset       Size  Chunks             Chunk Names
app.d796ba7633cf5b1023a0.js    1.17 MB       0  [emitted]  app
vendor.d796ba7633cf5b1023a0.js     389 kB       1  [emitted]  vendor
app.d796ba7633cf5b1023a0.js.map    1.42 MB       0  [emitted]  app
vendor.d796ba7633cf5b1023a0.js.map     466 kB       1  [emitted]  vendor
favicon.ico    24.8 kB          [emitted]
index.html  595 bytes          [emitted]
Child html-webpack-plugin for "index.html":
Asset    Size  Chunks       Chunk Names
index.html  553 kB       0
webpack: bundle is now VALID.

Output without using a callback:

Hash: c5e31d1eb986b7ef318d
Version: webpack 1.13.1
Time: 3891ms
Asset       Size  Chunks             Chunk Names
app.c5e31d1eb986b7ef318d.js    1.26 MB       0  [emitted]  app
1.counter.c5e31d1eb986b7ef318d.js    30.6 kB       1  [emitted]  counter
vendor.c5e31d1eb986b7ef318d.js     389 kB       2  [emitted]  vendor
app.c5e31d1eb986b7ef318d.js.map    1.54 MB       0  [emitted]  app
1.counter.c5e31d1eb986b7ef318d.js.map    37.9 kB       1  [emitted]  counter
vendor.c5e31d1eb986b7ef318d.js.map     466 kB       2  [emitted]  vendor
favicon.ico    24.8 kB          [emitted]
index.html  595 bytes          [emitted]
Child html-webpack-plugin for "index.html":
Asset    Size  Chunks       Chunk Names
index.html  553 kB       0
webpack: bundle is now VALID.

The file link provided for reference: https://github.com/davezuko/react-redux-starter-kit/blob/master/server/main.js

javascript build webpack webpack-dev-middleware

Answer 1

Answer №1

After some investigation, I have discovered that in the Webpack's source code, if a callback is provided to the webpack(options, callback) function, it will automatically run itself:

function webpack(options, callback) {
    ...
    if(callback) {
      ...
      compiler.run(callback);
    }
    return compiler;
}

To add a callback, you can do so by adding a plugin like this:

compiler.plugin("done", stats => {
  debug(hash)
})

Answer 2

After some investigation, I have discovered that in the Webpack's source code, if a callback is provided to the webpack(options, callback) function, it will automatically run itself:

function webpack(options, callback) {
    ...
    if(callback) {
      ...
      compiler.run(callback);
    }
    return compiler;
}

To add a callback, you can do so by adding a plugin like this:

compiler.plugin("done", stats => {
  debug(hash)
})

What could be causing me to receive two builds when using Webpack?

Answer №1

Similar questions

The xslt code is failing to invoke the JavaScript function

Having a minor problem in attempting to retrieve a random value

"Embedding PHP code within HTML tags, which is then embedded within

"Encountering a problem with numerous callbacks in the getJSON method

Conceal Tooltips with Materialize CSS

Issues with rendering in-line styles in ReactJS after a state update

Ensure that the input field only accepts numerical values

Error: Unable to call topFrame.window.changeSelectedBarStyle because it is not a valid function. What could be causing this

"Interactive Connect 4 Game in Javascript - Drop the disk into the bottom row of the chosen

The query callback does not recognize 'done' as a function, leading to a

Stop jQuery function from activating twice during scrolling

JavaScript - issue with event relatedTarget not functioning properly when using onClick

Efficiently Loading Vue Components with Webpack 2

Bypass the Array.reduce method in JavaScript

A guide on extracting individual Json fields and assigning them to separate variables

Incorporating mootools scripts into a gwt application

An effective way to prevent right-clicking on iframes across all websites

Is there a way to identify if you are at the bottom row of a column defined by CSS styling?

The useEffect alert is triggered before the component is re-rendered

Looking for assistance with implementing the Vue CDN script in a Laravel Blade template