Probleme und Lösungen für Fehler, die beim Zugriff auf die Seite nach dem Packen des Webpacks gemeldet wurden

Dieser Artikel stellt Ihnen hauptsächlich die Lösung für den Pfadfehler vor, der beim direkten Zugriff auf die Seite Bild nach der Webpack-Verpackung auftritt. Die Einführung im Artikel ist sehr detailliert und enthält bestimmte Referenzinformationen für Freunde, die auf dieses Problem stoßen . Value, Freunde in Not kommen und schauen unten vorbei.

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"
}

publicPath ist hier festgelegt, klicken Sie hier für die Verwendung

in 🎜>index.html verweist, lautet wie folgt: Beim Ausführen von

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

wird http://localhost:8080/ normal angezeigt.

webapck-dev-serverAls 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 Bilder verarbeitet, wie folgt:

Dann habe ich getestet, webapck-dev-server war erfolgreich, wepback war erfolgreich und Der Seitenzugriff wurde erfolgreich geöffnet.

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

Der Weg sieht so aus.

Das obige ist der detaillierte Inhalt vonProbleme und Lösungen für Fehler, die beim Zugriff auf die Seite nach dem Packen des Webpacks gemeldet wurden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!