webpack css-loader no encuentra imágenes dentro de la referencia url() en una hoja de estilos externa

Soy nuevo en todo el mundo Node/NPM/Webpack, así que disculpas si esto es obvio.

Estoy intentando construir un proyecto de front-end simple incluido con Webpack. Tengo node instalado, y tengo un paquete.archivo json configurado. Si corro " npm start "en mi directorio raíz, no recibo errores de la consola, y puedo ir a" localhost:3000 "en un navegador y ver mi salida" hola, mundo".

Mi siguiente tarea es incluir una hoja de estilo, que contiene una referencia a una imagen, como esto:

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

Con las cosas configuradas así, puedo ver la imagen a través del webpack-dev-server (yendo a localhost:3000 en un navegador web), pero si compilo el proyecto, la ruta a la imagen es incorrecta. No tengo ni idea de lo que estoy haciendo mal, así que estoy tirando esto a la pila con la esperanza de que alguien por ahí va a saber lo estúpido que estoy haciendo.

Aquí está mi paquete.archivo 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 webpack.config.js archivo:

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 índice.archivo 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>

...empezar.archivo 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 propio archivo css: 

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

Como dije en la parte superior, en el mundo webpack-dev-server, la ruta a la imagen se resuelve correctamente, y se muestra como el fondo del elemento DOM. En mundo publicado, el navegador me dice que no puede encontrar el archivo, con la consola de Safari mostrando claramente un archivo malo ruta: 

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!

Author: hairbo, 2015-07-21
Source

2 answers

Bien...ugh. Me acabo de dar cuenta. 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 su lugar era esto:

publicPath: './build/'

...que es un camino relativo. Las cosas parecen funcionar ahora.

ACTUALIZACIÓN:

Todavía soy muy nuevo en Webpack, por lo que todo esto sigue siendo bastante confuso. Dicho esto...

Creo que he hecho esto de la manera equivocada. Mi proyecto Webpack ha tenido un índice.archivo html en la raíz del proyecto, y yo estaba tratando de utilizar que tanto como el archivo que el webpack-dev-server golpearía Y lo que la compilación utilizaría como su punto de entrada. Eso me estaba causando un sinfín de dolores de cabeza, y no creo que ninguna solución que encontré realmente funcionara. Entonces encontré esto:

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

Esto le permite crear su índice.página html de 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 memoria, y cuando lo publica en su carpeta "build", un índice.el archivo html se crea dentro de esa carpeta.

Puede haber una verdadera manera "correcta" de manejar el problema que planteé aquí, pero esto parece funcionar muy bien, y de una manera indirecta, resuelve mis problemas, ya que evita toda la cuestión del camino por completo.

De todos modos, esto es una especie de paseo. Espero que ayude a alguien, y / o espero que alguien que sabe más acerca de esto viene aquí y me pone en claro.

 30
Author: hairbo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-24 20:05:47

ERROR que había enfrentado fue

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 webpack de nuevo.

Añadir 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 brevemente, lo que hace el cargador de archivos es - copia el archivo a una nueva ruta y coloca esa ruta en el CSS, para mi caso el archivo CSS estaba anidado dentro de alguna carpeta pública, mientras que el cargador de archivos lo pegaría en la raíz de público, con path=[path] definido todavía manpularía la ruta relativa. Por lo tanto la desactivación esto resuelve completamente mi problema de rutas relativas y para agregar tengo carpeta de imágenes anidadas por lo que esto evade el desafío de resolver estas rutas también. Y la copia dual de las mismas imágenes es algo que no necesito.

 12
Author: Rahil Lakhani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-18 00:56:23