Comment résoudre l'erreur d'accès direct au chemin de l'image de la page après l'empaquetage du webpack

Cet article vous présente principalement la solution à l'erreur d'accès direct au chemin de l'image de la page après l'empaquetage du webpack. L'introduction dans l'article est très détaillée et a une certaine valeur de référence et d'apprentissage pour les amis qui rencontrent ce problème. Jetons un coup d'œil 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"
}

Le publicPath est défini ici, cliquez ici pour l'utiliser

Le chemin de référence dans index.html est le suivant :

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

Lors de l'exécutionwebapck-dev-server, http://localhost:8080/ s'affiche normalement.

Ensuite, 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 l'image, comme suit :

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

Ensuite test, webapck-dev-server réussit, wepback réussit, l'accès à la page est ouvert et il réussit.

Le chemin ressemble à ceci.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la méthode de mélange de modules CSS dans les projets Webpack

Propriétés d'animation de transition et d'animation en CSS3 Introduction à l'utilisation de

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!