Personalización de la ruta de archivos de recursos en Webpack

Se puede establecer la ruta a los archivos de recursos en la carpeta de construcción. Esto se hace mediante la configuración assetModuleFilename. En esta configuración podemos especificar la carpeta donde se colocan los recursos, así como la plantilla del nombre del archivo.

En la plantilla del nombre, el comando [name] designa el nombre del archivo, el comando [hash] - el hash, y el comando [ext] - la extensión del archivo original.

Entonces, vamos a realizar la configuración:

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