Personalizarea căii către fișierele asset în Webpack

Se poate seta calea către fișierele asset în directorul de build. Acest lucru se face cu ajutorul setării assetModuleFilename. În această setare putem specifica directorul, în care sunt plasate asset-urile, precum și șablonul numele fișierului.

În șablonul de nume comanda [name] indică numele fișierului, comanda [hash] - hash-ul, iar comanda [ext] - extensia fișierului inițial.

Deci, haideți să facem setarea:

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