node.js - images - node fs empty
webpack css-loader no encuentra imágenes dentro de la referencia url() en una hoja de estilo externa (2)
Soy nuevo en todo el mundo de Node / NPM / Webpack, así que me disculpo si esto es obvio.
Estoy intentando construir un proyecto de front-end simple incluido con Webpack. Tengo el nodo instalado y tengo un archivo package.json configurado. Si ejecuto "npm start" en mi directorio raíz, no obtengo ningún error de la consola, y puedo ir a "localhost: 3000" en un navegador y ver mi salida "hello, world".
Mi próxima tarea es incluir una hoja de estilo, que contiene una referencia a una imagen, como esta:
.myimg {background: url(path/to/file.jpg);}
Con las cosas configuradas de esta manera, puedo ver la imagen a través del servidor webpack-dev-server (yendo a localhost: 3000 en un navegador web), pero si construyo el proyecto, la ruta a la imagen es incorrecta. No tengo idea de lo que estoy haciendo mal, así que le estoy diciendo esto al Stackiverse con la esperanza de que alguien sepa lo estúpido que estoy haciendo.
Aquí está mi archivo 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"
}
}
... y aquí está mi archivo 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'' }
]
}
};
... y luego el archivo index.html:
<!doctype html>
<html>
<head>
<title>Webpack Test</title>
</head>
<body>
<div class="imgtest">hello, world</div>
<script src="build/bundle.js"></script>
</body>
</html>
... el archivo "start.js" al que se hace referencia en el archivo de configuración:
require(''./test.css'');
console.log("y u no work?");
... y finalmente, el contenido del archivo css en sí:
.imgtest { background: url(img/volcano.jpg);}
Como dije en la parte superior, en el mundo de webpack-dev-server, la ruta a la imagen se resuelve correctamente, y se muestra como el fondo del elemento DOM. En el mundo publicado, el navegador me dice que no puede encontrar el archivo, con la consola de Safari mostrando claramente una ruta de archivo incorrecta:
http://localhost/build/1b05d814aa13ac035c6b122b9f5974f8.jpg
La ruta local correcta es esta:
http://localhost/~username/webpack1/build/1b05d814aa13ac035c6b122b9f5974f8.jpg
Claramente, estoy haciendo algo mal, pero no puedo entender qué. Cualquier ayuda o consejo es apreciado.
¡Gracias!
ERROR que había enfrentado era
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
Esto resuelve mi problema:
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]''
}
]}
Ejecute su paquete web de nuevo.
Adjunte todo el fondo: 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
para explicar en pocas palabras, lo que hace el cargador de archivos es copiar el archivo a una nueva ruta y poner esa ruta en el CSS, para mi caso, el archivo CSS estaba anidado dentro de una carpeta pública, mientras que el cargador de archivos lo pegaría en la raíz del público. con path = [path] definido, aún manpularía la ruta relativa. Por lo tanto, deshabilitar esto resuelve por completo mi problema de rutas relativas y para agregar he anidado la carpeta de imágenes, así que esto evade el desafío de resolver estas rutas también. Y la copia doble de las mismas imágenes es algo que no necesito.
De acuerdo ... ugh. Me lo imaginé. El problema era con la variable "publicPath" dentro de webpack.config.js. Tenía esto:
publicPath: ''/build/''
... que en retrospectiva es obviamente un camino absoluto. Lo que necesitaba en cambio era esto:
publicPath: ''./build/''
... que es un camino relativo. Las cosas parecen funcionar ahora.
ACTUALIZAR:
Todavía soy muy nuevo en Webpack, así que todo esto todavía es bastante confuso. Una vez dicho esto...
Creo que he ido por este camino equivocado. Mi proyecto Webpack ha tenido un archivo index.html en la raíz del proyecto, y estaba tratando de usarlo como el archivo que el servidor webpack-dev-server alcanzaría Y lo que la construcción usaría como su punto de entrada. Eso me estaba causando innumerables dolores de cabeza, y no creo que ninguna solución a la que recurriera realmente funcionó. Entonces encontré esto:
https://www.npmjs.com/package/html-webpack-plugin
Esto le permite crear su página index.html desde una plantilla, lo que significa que en realidad no tiene que existir como un archivo. webpack-dev-server lo crea sobre la marcha y lo almacena en la memoria, y cuando publica en su carpeta "compilación", se crea un archivo index.html dentro de esa carpeta.
Puede haber una verdadera forma "correcta" de manejar el problema que planteé aquí, pero parece funcionar muy bien, y de una manera indirecta, soluciona mis problemas, ya que elude por completo la cuestión del camino.
De todos modos, esto es un poco divagable. Espero que ayude a alguien, y / o espero que alguien que sepa más sobre esto venga aquí y me aclare.