webpack css-loader ne trouve pas d’images dans la référence url () dans une feuille de style externe

Je suis nouveau dans tout le monde Node / NPM / Webpack, alors excusez-moi si cela est évident.

Je tente de créer un projet frontal simple avec Webpack. J’ai un nœud installé et un fichier package.json configuré. Si je lance “npm start” dans mon répertoire racine, je ne reçois aucune erreur de la console, et je peux aller dans “localhost: 3000” dans un navigateur et voir la sortie “salut, monde”.

Ma tâche suivante consiste à inclure une feuille de style, qui contient une référence à une image, comme ceci:

.myimg {background: url(path/to/file.jpg);}

Avec des choses comme ça, je peux voir l’image via webpack-dev-server (en allant sur localhost: 3000 dans un navigateur web), mais si je construis le projet, le chemin vers l’image est incorrect. Je n’ai aucune idée de ce que je fais mal, alors je lance ceci au Stackiverse dans l’espoir que quelqu’un sait ce que je fais.

Voici mon fichier package.json:

 { "name": "webpack-test1", "version": "0.0.1", "description": "My project WTF.", "private": true, "scripts": { "start": "node server.js" }, "devDependencies": { "css-loader": "^0.15.2", "file-loader": "^0.8.4", "style-loader": "^0.12.3", "url-loader": "^0.5.6" }, "dependencies": { "webpack": "^1.9.6", "webpack-dev-server": "^1.8.2" } }

… et voici mon fichier webpack.config.js:

 var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ "./src/start.js" ], output: { filename: "bundle.js", path: path.join(__dirname, 'build'), publicPath: '/build/' }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(png|jpg)$/, loader: 'file-loader' } ] } };

… puis le fichier index.html:

    Webpack Test   hello, world

… le fichier “start.js” référencé dans le fichier de configuration:

 require('./test.css'); console.log("yu no work?");

… et enfin le contenu du fichier CSS lui-même:

 .imgtest { background: url(img/volcano.jpg);}

Comme je l’ai dit en haut, dans le monde de webpack-dev-server, le chemin de l’image se résout correctement et apparaît comme arrière-plan de l’élément DOM. Dans le monde publié, le navigateur m’indique qu’il ne trouve pas le fichier, la console de Safari affichant clairement un chemin de fichier incorrect:

 http://localhost/build/1b05d814aa13ac035c6b122b9f5974f8.jpg

Le chemin local correct est le suivant:

 http://localhost/~username/webpack1/build/1b05d814aa13ac035c6b122b9f5974f8.jpg

Clairement, je fais quelque chose de mal, mais je ne peux pas savoir quoi. Toute aide ou conseil est apprécié.

Merci!

Okay … Je viens de le comprendre. Le problème était avec la variable “publicPath” dans webpack.config.js. J’ai eu ceci:

 publicPath: '/build/'

… qui rétrospectivement est évidemment un chemin absolu. Ce dont j’avais besoin à la place était ceci:

 publicPath: './build/'

… qui est un chemin relatif. Les choses semblent fonctionner maintenant.

METTRE À JOUR:

Je suis encore très débutant sur Webpack, donc tout cela est encore assez déroutant. Ayant dit cela…

Je pense que je suis allé dans ce sens dans le mauvais sens. Mon projet Webpack avait un fichier index.html à la racine du projet, et j’essayais de l’utiliser à la fois comme fichier que webpack-dev-server appellerait ET comme base de la construction. Cela ne me causait pas de maux de tête, et je ne pense pas que les solutions que je puisse trouver fonctionnent vraiment. Alors j’ai trouvé ceci:

https://www.npmjs.com/package/html-webpack-plugin

Cela vous permet de créer votre page index.html à partir d’un modèle, ce qui signifie qu’il ne doit pas exister en tant que fichier. webpack-dev-server le crée à la volée et le stocke en mémoire, et lorsque vous publiez dans votre dossier “build”, un fichier index.html est créé dans ce dossier.

Il y a peut-être un vrai “bon” moyen de traiter le problème que j’ai soulevé ici, mais cela semble fonctionner très bien, et de manière détournée, cela résout mes problèmes, car cela évite toute la question du chemin.

En tout cas, c’est un peu décousu. J’espère que ça aide quelqu’un, et / ou j’espère que quelqu’un qui en sait plus à ce sujet vient ici et me met au courant.

ERREUR que j’avais affronté était

 Module parse failed: PATH:\TO\IMG\XYZ.PNG Unexpected character ' ' (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character ' ' (1:0) . . . . . @ ./~/css-loader!./~/sass-loader!./node/static/sass/style.scss 6:399692-399747

Cela résout mon problème:

 module: { . . .,{ test: /\.scss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader"), root: path.resolve('./node/static/sass') }, { test: /\.(jpe?g|gif|png)$/, loader: 'file-loader?emitFile=false&name=[path][name].[ext]' } ]}

Exécutez votre webpack à nouveau.

Ajoutez tout le fond: url('~/../somePath/toImage.png');

 > [email protected] react-build PATH:\TO\PROJECT > webpack --watch --display-error-details --display-cached --content-base ./ Hash: f6e4cbbf0068b5792247 Version: webpack 1.13.2 Time: 4882ms Asset Size Chunks Chunk Names js/bundle.js 760 kB 0 [emitted] main css/bundle.css 393 kB 0 [emitted] main + 180 hidden modules Child extract-text-webpack-plugin: + 76 hidden modules

pour expliquer en bref, ce que le chargeur de fichiers fait est – il copie le fichier dans un nouveau chemin et place ce chemin dans le css, car mon fichier CSS était nested dans un dossier public, tandis que le chargeur de fichiers le collait à la racine du public, Avec path = [path] défini, le chemin relatif sera toujours généré. Ainsi, la désactivation complète résout mon problème de chemins relatifs et pour append un dossier d’images nestedes, vous évitez ainsi de résoudre ces problèmes. Et la copie double des mêmes images est quelque chose dont je n’ai pas besoin.