CODEWITHSUNDEEP
webpack
temporary_user_name
temporary_user_name

Reputation: 37018

How can I get the name of the files webpack outputs for the JS and the CSS?

After completing its various subprocesses resulting in a bundled JS file and a bundled CSS file, I need to get those filenames and manually perform a final operation with them in my build process. How can I modify my webpack.config.js to get access to those final filenames (e.g. bundle-9aef5a96e.en-US.js)?

I need something akin to:

finalOperation: (js, css) => { /* code using js filename and css filename */ }

Upvotes: 3

Views: 1748

Answers (1)

ford04
ford04

Reputation: 74490

First you can use a Webpack compiler hook for the done phase to enqueue your final build operation. The done hook gets executed when the compilation has completed and receives a stats parameter in its callback (see Link).

From stats you can grab output files emitted from the compilation via the assets which takes output file name as key and maps it to an asset object. E.g.

Object.keys(stats.compilation.assets) // emitted file names, what you want
Object.values(stats.compilation.assets) // details about each asset

As an alternative you could retrieve all files via traversing your chunks:

stats.compilation.chunks.map(c => c.files)

More info on the stats object is here. Add code like this as a plugin in your webpack.config.js:

plugins: [
  // ...
  {
    apply: compiler => {
      compiler.hooks.done.tap("My-FinalizePlugin", stats => {
        // your finalize build step
        console.log(stats.compilation.chunks.map(c => c.files))
        console.log(Object.keys(stats.compilation.assets))
      })
    }
  }
]

Hope, that gets the job done.

Upvotes: 2

Related Questions