npm install @rushstack/hashed-folder-copy-plugin --save-dev

This webpack plugin provides a simple method for copying a folder to the build outputand including a hash in the folder's name, accessible to the bundle's runtime.

In your Webpack config, include the plugin in yourplugins array:

import{HashedFolderCopyPlugin}from'@rushstack/hashed-folder-copy-plugin';{plugins:[newHashedFolderCopyPlugin()]}

and call therequireFolder function in your webpack bundle:

constfolderUrl=requireFolder({outputFolder:'my-folder-name_[hash]',sources:[{globsBase:'../assets/',globs:['**/*.png']}]})

TypeScript typings are provided for therequireFolder function:

importtype{IRequireFolderOptions}from'@rushstack/hashed-folder-copy-plugin';declarefunctionrequireFolder(options:IRequireFolderOptions):string;constfolderUrl:string=requireFolder({outputFolder:'my-folder-name_[hash]',sources:[{globsBase:'../assets/',globPatterns:['**/*.png']}]})

TherequireFolder takes an options object with two properties:

This is the name of the folder to be created in the webpack output folder. Itsname supports a[hash] token, which will be replaced with a stable hash of the assetsthat are copied to the folder. Note that the[hash] token is not required.

This is an array of glob base paths and glob patterns that will be copied to theoutput folder. Each entry in this array takes aglobsBase property, which is thebase path to the folder to be copied, and aglobPatterns property, which is an array ofglob patterns to be evaluated under theglobsBase folder. The path inglobsBasesupports standard Node resolution.

See theexample project.

To get therequireFolder function type to work in TypeScript, include a reference to"@rushstack/hashed-folder-copy-plugin/ambientTypes" in yourtsconfig.json file'scompilerOptions.types property. For example:

{"compilerOptions": {"types": ["webpack-env","@rushstack/hashed-folder-copy-plugin/ambientTypes"// This value, specifically    ]  }}