Webpack and version numbers in output file

Question

I am using webpack to build my react application. I just want to know is there are way of generating html having script tab with version number in file name like .

I have tried to explore the HtmlWebpackPlugin but found nothing. Can anyone give me a direction whether there is a plugin available to do this or I have to write my own script.

Thanks

Verminous

Answer 1

Fulfilling @Manis answer I want to provide more complete instructions on this solution.

It can be achieved by output.filename substitutions settings.

{
    entry: ['./your/entry.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].bundle.js', // Line of interest
        publicPath: '/'
    },
    /* ... */
}

The [contenthash] substitution will add a unique hash based on the content of an asset. When the asset's content changes, [contenthash] will change as well.

More options and examples here.

Dowling

Answer 2

Use [hash] in the name of your output files. Look here for more details.

P.S.: Your index.html should have correct file name as far as I'm experiencing in my project

Dagall

Answer 3

If the question here is how to use the version from your package.json, I had the same problem and solved it by:

add this to your webpack.config.js

var PACKAGE = require('./package.json');
var version = PACKAGE.version;

Then you can append the version to your file:

  output: {
    ...
    filename: `myLibrary-${version}.js`
    ...
  }

Hautboy