webentwicklung-frage-antwort-db.com.de

webpack css-loader findet keine Bilder innerhalb der url () Referenz in einem externen Stylesheet

Ich bin neu in der gesamten Node/NPM/Webpack-Welt, entschuldige mich also, wenn dies offensichtlich ist.

Ich versuche, ein einfaches Front-End-Projekt zu erstellen, das mit Webpack gebündelt ist. Ich habe einen Knoten installiert und eine package.json-Datei konfiguriert. Wenn ich in meinem Stammverzeichnis "npm start" ausführe, werden auf der Konsole keine Fehler angezeigt, und ich kann in einem Browser zu "localhost: 3000" wechseln und die Ausgabe "Hallo Welt" anzeigen.

Meine nächste Aufgabe ist das Einfügen eines Stylesheets, das einen Verweis auf ein Bild enthält, wie folgt:

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

Mit diesen Einstellungen kann ich das Image über den Webpack-Dev-Server anzeigen (indem ich in einem Webbrowser zu localhost: 3000 gehe), aber wenn ich das Projekt erstelle, ist der Pfad zum Image falsch. Ich habe keine Ahnung, was ich falsch mache, also werfe ich das zum Stackiverse in der Hoffnung, dass jemand da draußen weiß, was für eine dumme Sache ich tue.

Hier ist meine package.json-Datei:

{
  "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"
  }
}

... und hier ist meine webpack.config.js Datei:

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' }
    ]
}

};

... und dann die index.html Datei:

<!doctype html>
<html>
<head>
    <title>Webpack Test</title>
</head>

<body>
    <div class="imgtest">hello, world</div>
    <script src="build/bundle.js"></script>
</body>
</html>

... die Datei "start.js", auf die in der Konfigurationsdatei verwiesen wird:

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

... und zum Schluss den Inhalt der CSS-Datei selbst:

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

Wie oben bereits erwähnt, wird in der Webpack-Dev-Server-Welt der Pfad zum Image ordnungsgemäß aufgelöst und als Hintergrund für das DOM-Element angezeigt. In der veröffentlichten Welt teilt mir der Browser mit, dass die Datei nicht gefunden werden kann, und die Safari-Konsole zeigt einen fehlerhaften Dateipfad an:

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

Der richtige lokale Pfad lautet wie folgt:

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

Klar, ich mache etwas falsch, aber ich kann nicht herausfinden, was. Jede Hilfe oder Beratung wird geschätzt.

Vielen Dank!

50
hairbo

Okay ... ugh. Ich habe es gerade herausgefunden. Das Problem lag bei der Variablen "publicPath" in webpack.config.js. Ich hatte das:

publicPath: '/build/'

... was im Nachhinein natürlich ein absoluter Weg ist. Was ich stattdessen brauchte, war Folgendes:

publicPath: './build/'

... das ist ein relativer Weg. Die Dinge scheinen jetzt zu funktionieren.

UPDATE:

Ich bin noch sehr neu in Webpack, daher ist das alles immer noch ziemlich verwirrend. Davon abgesehen ...

Ich glaube, ich habe das falsch gemacht. Mein Webpack-Projekt hatte eine index.html-Datei im Stammverzeichnis des Projekts, und ich habe versucht, diese als Datei zu verwenden, auf die der Webpack-Dev-Server zugreifen würde, UND als Einstiegspunkt für den Build. Das bereitete mir endlose Kopfschmerzen und ich glaube nicht, dass eine Lösung, auf die ich traf, wirklich funktioniert hat. Dann habe ich folgendes gefunden:

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

Auf diese Weise können Sie Ihre index.html-Seite aus einer Vorlage erstellen. Dies bedeutet, dass sie nicht unbedingt als Datei vorhanden sein muss. webpack-dev-server erstellt es im Handumdrehen und speichert es im Speicher. Wenn Sie es in Ihrem "Build" -Ordner veröffentlichen, wird eine index.html-Datei in diesem Ordner erstellt.

Es mag einen "richtigen" Weg geben, um mit dem Problem umzugehen, das ich hier angesprochen habe, aber das scheint wirklich gut zu funktionieren, und auf Umwegen löst es meine Probleme, da es die ganze Pfadfrage gänzlich überdeckt.

Wie auch immer, das ist eine Art Streifzug. Ich hoffe, es hilft jemandem und/oder ich hoffe, dass jemand, der mehr darüber weiß, hierher kommt und mich klar macht.

32
hairbo

FEHLER, dem ich gegenübergestanden hatte, war

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

Das löst mein Problem:

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]'
    }
  ]}

Führen Sie Ihr Webpack erneut aus.

Hänge den gesamten Hintergrund an: 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

um es kurz zu machen: Der Dateilader kopiert die Datei in einen neuen Pfad und fügt diesen Pfad in das CSS ein. In meinem Fall war die CSS-Datei in einem öffentlichen Ordner verschachtelt, während der Dateilader sie im Stammverzeichnis von public einfügte. Wenn path = [path] definiert ist, wird der relative Pfad weiterhin festgelegt. Durch Deaktivieren dieser Option wird das Problem der relativen Pfade vollständig gelöst. Außerdem habe ich einen Ordner mit verschachtelten Bildern, sodass die Herausforderung vermieden wird, diese Pfade ebenfalls aufzulösen. Und eine doppelte Kopie derselben Bilder brauche ich nicht.

12
Rahil Lakhani