Search code examples
javascriptbuildwebpackwebpack-dev-middleware

Why am I getting 2 builds with Webpack?


I need to know the hash of the build so I'm trying to capture it in the callback function:

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

But when I'm doing this something weird happens: I'm getting 2 builds and can capture only 1 hash - obviously I need the other one instead of the one in the callback.

Output when having a callback:

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 when no 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.

File: https://github.com/davezuko/react-redux-starter-kit/blob/master/server/main.js


Solution

  • Ok I've found out... In the Webpack's source if there is a callback given to the webpack(options, callback) then it automatically runs itself:

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

    If someone wants to add a callback do it by adding a plugin as follows:

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