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
< Le chemin référencé pardans 🎜>index.html est le suivant :
Lors de l'exécution de<script type="text/javascript" src="src/bundle.js" ></script>
webapck-dev-server
Ensuite, il doit être empaqueté pour que la page soit accessible directement sans la commande.
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!