Umgang mit Bildpfadfehlern nach der Konfiguration und Verpackung des Webpacks

Dieses Mal zeige ich Ihnen, wie Sie mit Fehlern im Bildpfad nach der Webpack-Konfiguration und -Verpackung umgehen. Welche Vorsichtsmaßnahmen gibt es für den Umgang mit Fehlern im Bildpfad nach der Webpack-Konfiguration? und Verpackung? Das Folgende ist ein praktischer Fall.

Problem

Das Projekt funktioniert normal in der Entwicklungsumgebung. Nach der Überprüfung des Elements wird festgestellt, dass der Pfad falsch ist.

Der Bildpfad lautet wie folgt: Hintergrund: url(/static/img/bg_camera_tip.bd37151.png), aber die Datei existiert in diesem Pfad nicht.

Das Verzeichnis der gepackten Dateien lautet wie folgt:

Sie können sehen, dass der Pfad des Hintergrundbilds ../../static sein sollte, aber es ist ist eigentlich /static. Sobald Sie die Ursache gefunden haben, wird sie behoben

Methode 1

Sehen Sie sich die Konfiguration von webpack.base.conf.js im Build-Verzeichnis an . Die Bilddateien werden vom URL-Loader verarbeitet.

 module: {
  rules: [
   ...
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   ...
  ]
 }

Seine Funktion besteht darin, eine Base64-Zeichenfolge zurückzugeben, wenn die Dateigröße unter dem Grenzwert liegt. Tatsächlich wird die Bildressource in eine Base64-Zeichenfolge codiert und in die CSS-Datei eingefügt Netzwerkanforderung, da jedes Bild vom Server heruntergeladen werden muss. Wenn die Datei jedoch zu groß ist, wird die Base64-Zeichenfolge sehr lang sein. Wenn sie in der CSS-Datei platziert wird, dauert das Herunterladen der CSS-Datei länger und der Gewinn überwiegt Der Verlust ist also begrenzt. Parameter innerhalb dieses Bereichs werden in eine Base64-Zeichenfolge konvertiert, deren Einheit Bytes ist. Für dieses Problem stellt der Loader auch einen publicPath-Parameter bereit, der zum Ändern der referenzierten Bildadresse verwendet wird. Der Standardwert ist der aktuelle Pfad. Ändern Sie ihn also einfach direkt, indem Sie einen Parameter publicPath hinzufügen: '../.. unter der Optionsknoten.

 module: {
  rules: [
   ...
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     publicPath: '../../', //你实际项目的引用地址前缀
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   ...
  ]
 }

Methode 2

Es gibt auch eine Regel in webpack.base.conf.js. Jede Vue-Datei wird von vueLoaderConfig verarbeitet

 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
   },
   ...
  ]
 }

vueLoaderConfig Befindet sich in build/vue-loader.conf.js und ruft die cssLoaders-Methode von build/utils.js auf.

  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  }

Wenn der options.extract-Wert in der Produktionsumgebung wahr ist, wird das ExtractTextPlugin-Plugin zur Verarbeitung aufgerufen. Seine Funktion besteht darin, die im Projekt referenzierten Stildateien in eine unabhängige CSS-Datei zu extrahieren Das Laden aller CSS-Dateien entspricht dem parallelen Laden von CSS-Dateien, wodurch die Anzahl der Netzwerkanforderungen verringert werden kann. Weitere Vorteile und Verwendungsmöglichkeiten finden Sie unter ExtractTextWebpackPlugin. Zurück zu dieser Frage: Es gibt auch einen weiteren Parameter, publicPath, der die publicPath-Konfiguration des angegebenen Loaders überschreiben kann. Dann kann die Pfadadresse der Referenzdatei genau wie bei der vorherigen Konfiguration für alle Loader einheitlich konfiguriert werden.

Außerdem gibt der user:loader hier tatsächlich eine Reihe von Loader-Sammlungen zurück. Die Rückgabe von cssLoaders ist

 return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

Dies bedeutet, dass dies auch dann der Fall ist, wenn Sie es nicht in webpack.base.conf konfigurieren .js Der Grund, warum der Sass-Loader auch die SASS-Syntax verwenden kann.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Analyse der Schritte zur Verwendung der PopupWindow-Komponente in Vue

Detaillierte Erläuterung der Schritte zur Implementieren Sie die Hervorhebung der Winkelführung

Das obige ist der detaillierte Inhalt vonUmgang mit Bildpfadfehlern nach der Konfiguration und Verpackung des Webpacks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!