Personnalisation du chemin des fichiers assets dans Webpack

Il est possible de définir le chemin des fichiers assets dans le dossier de build. Cela se fait via le paramètre assetModuleFilename. Dans ce paramètre, nous pouvons spécifier le dossier où les assets sont déposés, ainsi que le modèle du nom de fichier.

Dans le modèle de nom, la commande [name] désigne le nom du fichier, la commande [hash] - le hash, et la commande [ext] - l'extension du fichier initial.

Alors, procédons à la configuration :

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