Personalizzazione del percorso dei file asset in Webpack

È possibile impostare il percorso dei file asset nella cartella di build. Questo si fa tramite l'opzione assetModuleFilename. In questa opzione possiamo specificare la cartella dove vengono posizionati gli assets, così come il template del nome del file.

Nel template del nome, il comando [name] indica il nome del file, il comando [hash] - l'hash, e il comando [ext] - l'estensione del file originale.

Quindi, configuriamo:

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