Webpack less-loader Fehlender Basispfad bei der Produktion Build

Question

Ich habe eine Vue-Js-App, die Webpack verwendet. Alles funktioniert gut in Entwicklungs- und Testumgebungen, aber ich habe Probleme, es für die Produktion zu erstellen.

Ich habe Hintergrundbilder in den LESS-Dateien. Die Bilddateien befinden sich in /static. (Ich bin nicht sicher, ob das ist koscher oder wenn sie in den Seiten src/assets sein sollten.)

Auf jeden Fall, wenn die LESS so etwas wie dies hat:

background-url: url("/static/img/foobar/my-image.svg") 

Dann wird die compilted CSS wird das gleiche haben url

background-url: url("/static/img/foobar/my-image.svg") 

Wenn der Browser Lader, es nicht, dass imgate Datei finden. Der Browser versucht, die Datei hier zu finden:

file:///static/img/foobar/my-image.svg 

Kann jemand einen Weg empfiehlt den absoluten Pfad vorangestellt wird, wenn die Anwendung für die Produktion baut?

Answer 1

Haben Sie Ihre statischen Ressourcen außerhalb unseres Projektverzeichnisses in /static? Sonst verstehe ich nicht, warum Ihr Browser versucht, es von file:///static/img/foobar/my-image.svg

auf jeden Fall anfordern, sollten Ihre statischen Vermögenswerte Teil Ihres Repo/Projekt sein. Sie müssen nicht in src Verzeichnis sein, ein /static Ordner innerhalb der Wurzel Ihres Projekts ist in Ordnung.

Wenn Sie Ihre Anwendung kompilieren - sagen wir mal in einen Ordner dist - sollten Sie die Bilder auch in diesem Ordner dist kopieren. In meiner app verwende ich die Kopie-webpack-Plugin für diese Aufgabe (ich meine Bilder in ./public/assets/img/.. haben und ich auf sie verweisen als /assets/img/..)

const CopyWebpackPlugin = require('copy-webpack-plugin'); 
    ... 

    plugins: [ 
    ... 
    /** copy all files from the public folder to the compilation root */ 
    new CopyWebpackPlugin([{ 
     from: 'public', 
     to : '' 
    }]), 
    ... 

auch sollten Sie sicherstellen, dass Sie die Datei-Lader an der richtigen Stelle für Ihre statischen Vermögenswerte. Ich benutze es wie folgt:

Ich hoffe, das wird Ihnen helfen, Ihr Problem zu lösen.

Answer 2

Ich landete schließlich die Bilder in assets/img und aktualisieren dann meine Webpack-Konfiguration, um das Verzeichnis mit publicPath anzugeben. So sieht es aus:

 { 
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
    loader: 'file-loader', 
    include: [resolve('src')], 
    options: { 
     limit: 10000, 
     name: '/[name].[hash:7].[ext]', 
     publicPath: path.resolve(__dirname, 'app') 
    }