Aanpassen van het pad naar assetbestanden in Webpack

Je kunt het pad naar de assetbestanden in de buildmap instellen. Dit wordt gedaan met behulp van de instelling assetModuleFilename. In deze instelling kunnen we de map specificeren, waar de assets worden geplaatst, evenals de sjabloon voor de bestandsnaam.

In de naam sjabloon geeft het commando [name] de bestandsnaam aan, commando [hash] - de hash, en commando [ext] - de extensie van het oorspronkelijke bestand.

Laten we dus de configuratie uitvoeren:

webpack.config.jsexport default {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve('dist'),
    assetModuleFilename: 'assets/[name].[hash][ext]', // onze instelling
  },
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};