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

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

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

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

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!