Au départ, je n'ai pas bien compris l'essence du problème, je corrige la question, afin de formuler plus précisément le problème ...
Il existe un tel assemblage
webpack
final:
<header> <img src="${require(`../../../../binary/image/sheelak/0viber-image.jpg`)}" alt=""/> </header>Il y a un fichier` src folder - template.html, dans lequel il y a une telle partie de la mise en page
<header> <img src="${require(`../../../../binary/image/sheelak/0viber-image.jpg`)}" alt=""/> </header>qui après compilation
webpack
réincarné dans
index.html dans le dossier public
, j'obtiens ce résultat p ><div id="root"> <img src="images/iconfinder_tech_0001_4023871.png" alt="" /> </div>Et ça marche.
En même temps
src
il y a un dossierpages
avec différentes pages , dans lequel il y a le même morceau de composition<div id="root"> <img src="${require(`../binary/image/icons/iconfinder_tech_0001_4023871.png`)}" alt="" /> </div>et après avoir exécuté
webpack
un dossier avec ces fichiers est créé et voici le résultat p>'use strict'; const webpack = require('webpack'); const path = require('path'); const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); const HtmlWebpackPlugin = require('html-webpack-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const minimizerBlock = { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { warnings: false, parse: {}, compress: {}, mangle: true, output: null, toplevel: false, nameCache: null, ie8: false, keep_fnames: false, }, }), new OptimizeCSSAssetsPlugin({}) ] } const config = { entry: { main: './frontend/src/index.js' }, output: { path: path.resolve(__dirname, './public'), filename: 'main.js' }, devServer: { contentBase: path.join(__dirname, 'public'), port: 8888, overlay: true, proxy: { '/api': 'http://localhost:8889' } }, module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /\.less$/, use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"] }, { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"] }, { test: /\.sass$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"] }, //{ test: /\.(ttf|eot|woff|woff2|png|jpg|jpeg|svg|gif|webp)$/, loader: 'url-loader', }, { test: /\.(png|jpg|jpeg|svg|gif|webp)$/, include: [ path.resolve(__dirname, './frontend/binary/image/') ], use: [{ loader: 'file-loader', options: { name: 'image/[name].[ext]', } }] }, { test: /\.(eot|svg|ttf|woff|woff2)$/, include: [ path.resolve(__dirname, './frontend/binary/fonts/') ], use: [{ loader: 'file-loader', options: { name: 'fonts/[name].[ext]', } }] }, { test: /\.(mp3)$/, include: [ path.resolve(__dirname, './frontend/binary/audio/') ], use: [{ loader: 'file-loader', options: { name: 'audio/[name].[ext]', } }] }, { test: /\.(html)$/, include: [ path.resolve(__dirname, './frontend/pages/') ], use: [{ loader: 'file-loader', options: { name: '[path][name].[ext]', } }] }, ] }, plugins: [ new MiniCssExtractPlugin({ filename: './index.css', }), new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'frontend/src/', 'template.html'), filename: 'index.html', favicon: 'frontend/binary/image/icons/iconfinder_tech_0001_4023871.png', }), ] }; module.exports = (env, options) => { let production = options.mode == 'production'; config.devtool = production ? false : 'inline-cheap-module-source-map'; config.optimization = production ? minimizerBlock : {}; return config; }Et puis le problème de
require
pourimg
qui dansheader
ne fonctionne pasobtenir une erreur.
Dites-moi ce qui problème avec mon pack Web?
blockquote >
6 Réponses :
Vous utilisez file-loader
sur vos fichiers html, qui, je ne crois pas, tente d'analyser quoi que ce soit à l'intérieur du fichier, il le copie simplement dans le dossier de sortie.
Je ' d suggérer d'essayer d'utiliser html-loader
à la place, et voir si cela résout le problème.
En particulier, vous devez modifier cette section:
npm i -D html-loader
pour ressembler à ceci:
{ test: /\.(html)$/, include: [ path.resolve(__dirname, './frontend/pages/') ], use: [{ loader: 'html-loader', options: { name: '[path][name].[ext]', } }] }
Et éventuellement installer le chargeur html en utilisant:
{ test: /\.(html)$/, include: [ path.resolve(__dirname, './frontend/pages/') ], use: [{ loader: 'file-loader', options: { name: '[path][name].[ext]', } }] }
p>
Je l'ai déjà fait ... Ensuite, j'ai un script appelé "JS" qui importe ces fichiers "HTML", mais si j'ajoute "html-loader", l'importation ne se produit pas
Je ne peux pas saisir le point. Je veux comprendre, je ne demande pas d'exemple tout fait. J'aime comprendre ce que je fais. Dois-je utiliser et html-loader
sur file-loader
?
Si vous voulez savoir quand vers quel chargeur lisez:
https: //webpack.js. org / loaders / et
ici pour les images Je pense que url-loader
est bon car il peut également rendre les liens d'images encodés en base 64 sous forme d'images.
Essayez:
< pre> XXX Que va-t-il faire? cela prendra n'importe quel fichier de type jpg | png | gif | eot | woff2 | woff | ttf | ico | svg
et émettra dans le dossier static
(peut être n'importe quel nom également facultatif ) & ajouter un hachage aux noms. Il émettra non seulement des images et des polices, mais limitera également la taille de tout fichier à 100 ko et ajoutera également un hachage unique à chaque fois au nom des ressources statiques en s'assurant que tout changement d'image portant le même nom actualisera également le cache.
url-loader, n'a rien à voir avec ce problème
pouvez-vous supprimer la ligne ci-dessous de la configuration et vérifier
favicon: 'frontend/binary/image/icons/iconfinder_tech_0001_4023871.png'
Vous n'avez pas de problème de chargeur, mais la façon dont vous utilisez les littéraux de modèle
. Les backticks doivent envelopper $ {}
<header> <img src=`${require("../../../../binary/image/sheelak/0viber-image.jpg")}` alt=""/> </header>
De la même manière, vous auriez
<div id="root"> <img src=`${require("../binary/image/icons/iconfinder_tech_0001_4023871.png")}` alt="" /> </div>
Pour utiliser require dans vos modèles de fichiers html. vous devez inclure html-loader
pour les fichiers .html
pendant que vous avez utilisé file-loader
pour cela.
donc, la configuration du pack web devrait être quelque chose comme:
{ test: /\.(html)$/, include: [ path.resolve(__dirname, './frontend/pages/') ], use: [{ loader: 'html-loader', options: { name: '[path][name].[ext]', attrs: [':data-src'] } }] } { test: /\.(png|jpg|jpeg|svg|gif|webp)$/, include: [ path.resolve(__dirname, './frontend/binary/image/') ], use: [{ loader: 'file-loader', options: { name: 'image/[name].[ext]', } }] }
et ensuite utiliser require dans la balise img comme ci-dessous:
Pour en savoir plus ici
p >
Je l'ai déjà essayé, en retour je reçois ce module.exports = "
Et je ne sais pas comment y faire face.
@Air J'ai cloné et exécuté votre projet sur ma machine (mac). son fonctionnement en douceur sans aucun 404. pouvez-vous me dire ce qui ne va pas exactement?
Désolé, j'ai oublié de mettre à jour le référentiel. Vous pouvez réessayer
Vous devez utiliser html-loader
avec l'indicateur interpolate
activé:
{ test: /\.(html)$/, include: [ path.resolve(__dirname, './frontend/pages/') ], use: [ { loader: 'file-loader' }, { loader: 'extract-loader' }, { loader: 'html-loader', options: { interpolate: true, } } ], exclude: [ path.resolve(__dirname, 'frontend/src/', 'template.html') ] }
J'ai créé un pr pour résoudre votre problème: https://github.com/sarnor/club/pull/1 .
Notez également que l'interpolation est moche lorsque vous pouvez simplement écrire une source d'image comme: En notant également que votre URL relative pointait vers un mauvais répertoire, il vous manquait .
../
dans votre URL.
@Air Je suis content d'avoir pu aider. warmatebebi ^ _ ^
Shenc gisurveb warmatebebs ...)
Vous rencontrez toujours le problème?
Abestrad, oui, je n'ai pas encore résolu ce problème