Anpassen des Asset-Dateipfads in Webpack

Man kann den Pfad zu den Asset-Dateien im Build-Ordner festlegen. Dies geschieht mit der Einstellung assetModuleFilename. In dieser Einstellung können wir den Ordner angeben, in dem die Assets abgelegt werden, sowie die Vorlage für den Dateinamen.

In der Namensvorlage steht der Befehl [name] für den Dateinamen, der Befehl [hash] für den Hash, und der Befehl [ext] für die Erweiterung der ursprünglichen Datei.

Also, lassen Sie uns die Konfiguration vornehmen:

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