Problèmes et solutions aux erreurs signalées lors de l'accès à la page après l'empaquetage du webpack

Cet article vous présente principalement la solution à l'erreur de chemin d'accès direct à la page image après l'empaquetage du webpack. L'introduction dans l'article est très détaillée et contient certains apprentissages de référence pour les amis qui rencontrent ce problème. .Valeur, amis dans le besoin venez jeter un oeil ci-dessous.

Avant-propos

L'erreur de chemin d'image mentionnée dans cet article est comme ça, exécutez webpack-dev-server, tout est normal, pas d'erreur. Après le webpacking, ouvrez directement la page d'index et signalez une erreur. L'image est introuvable. La raison pour laquelle elle est introuvable est que le chemin est erroné.

Regardez d'abord le code de mon projet

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 est défini ici, cliquez ici pour l'utiliser

dans 🎜>index.html est le suivant : Lors de l'exécution de

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

, http://localhost:8080/ s'affiche normalement.

webapck-dev-serverEnsuite, il doit être empaqueté pour que la page soit accessible directement sans la commande.

L'opération est la suivante :

1. Exécutez webpack

2. Copiez tous les fichiers du build vers src

3 .Afficher la page

L'image est introuvable car le chemin de l'image est erroné.

J'ai résolu ce problème en définissant publicPath séparément pour le chargeur qui traite les images, comme suit :

Ensuite, testez, webapck-dev-server réussit, wepback réussit, ouvrez la page accès, réussi.

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

Le chemin ressemble à ceci.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!