Maison > interface Web > js tutoriel > le corps du texte

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

零下一度
Libérer: 2018-05-19 09:23:43
original
3429 Les gens l'ont consulté

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"
}
Copier après la connexion

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

< Le chemin référencé par

dans 🎜>index.html est le suivant :

Lors de l'exécution de
<script type="text/javascript" src="src/bundle.js" ></script>
Copier après la connexion
, 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: &#39;url-loader?limit=8192&name=images/[hash:8].[name].[ext]&#39;,
  options:{
   publicPath:&#39;/&#39;
  }
  }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal