Customizing Asset File Paths in Webpack
You can set the path to the asset files in the build folder. This is done using the assetModuleFilename setting. In this setting, we can specify the folder where the assets are stored, as well as the file name template.
In the name pattern, the command [name] is the file name, the command [hash] is the hash, and the command [ext] is the extension of the initial file.
So, let's do the setup:
export default {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve('dist'),
assetModuleFilename: 'assets/[name].[hash][ext]', // our setup
},
module: {
rules: [
{
test: /\.png$/,
type: 'asset/resource'
}
]
},
plugins: [
new HtmlWebpackPlugin(),
],
};
Make sure all assets are placed in the resources folder.
