So beheben Sie den Fehler beim direkten Zugriff auf den Seitenbildpfad nach der Webpack-Verpackung

Dieser Artikel führt Sie hauptsächlich in die Lösung des Fehlers ein, der beim direkten Zugriff auf den Seitenbildpfad nach der Webpack-Verpackung auftritt. Die Einführung im Artikel ist sehr detailliert und hat einen gewissen Referenz- und Lernwert für Freunde, die auf dieses Problem stoßen Werfen wir einen Blick nach unten.

Vorwort

Der in diesem Artikel erwähnte Bildpfadfehler ist wie folgt. Führen Sie webpack-dev-server aus, alles ist normal, keine Fehler. Öffnen Sie nach dem Webpacking direkt die Indexseite und melden Sie einen Fehler. Das Bild kann nicht gefunden werden, weil der Pfad falsch ist.

Schauen Sie sich zuerst meinen Projektcode an

webpack.config.js

var Webpack = require("webpack");
var path = require("path");

module.exports = {
 entry: './js/entry.js',
 output: {
 path: path.join(__dirname, '/build'),
 filename: 'bundle.js',
 publicPath: "/src/"
 },
 module: {
 loaders: [{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
  }, {
  test: /\.(png|jpg)$/,
  loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
  }, 
  {
  test: require.resolve('zepto'),
  loader: 'exports-loader?window.Zepto!script-loader'
  }
 ]
 },
 watch: true,
 devtool: "cheap-module-eval-source-map"
}

Der publicPath wird hier festgelegt, klicken Sie hier zur Verwendung

Der Referenzpfad in index.html lautet wie folgt:

<script type="text/javascript" src="src/bundle.js" ></script>

Beim Ausführen von webapck-dev-server, http://localhost:8080/ wird normal angezeigt.

Als nächstes muss es gepackt werden, damit die Seite ohne den Befehl direkt aufgerufen werden kann.

Der Vorgang ist wie folgt:

1. Webpack ausführen

2. Alle Dateien im Build nach src kopieren

3 .Seite anzeigen

Das Bild kann nicht gefunden werden, da der Bildpfad falsch ist.

Ich habe dieses Problem gelöst, indem ich publicPath separat für den Loader eingestellt habe, der das Bild verarbeitet, wie folgt:

　　　{
  test: /\.(png|jpg)$/,
  loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',
  options:{
   publicPath:'/'
  }
  }

Dann testen, webapck-dev-server ist erfolgreich, wepback ist erfolgreich, der Seitenzugriff wird geöffnet und es ist erfolgreich.

Der Weg sieht so aus.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Methode zum Mischen von CSS-Modulen in Webpack-Projekten

Übergangs- und Animationsanimationseigenschaften in CSS3 Einführung in die Verwendung von

Das obige ist der detaillierte Inhalt vonSo beheben Sie den Fehler beim direkten Zugriff auf den Seitenbildpfad nach der Webpack-Verpackung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!