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:
export 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(),
],
};
Sorgen Sie dafür, dass alle Assets
in den Ordner resources gelegt werden.
