javascript - ¿Cómo configurar el directorio de salida del archivo de fuente desde font-awesome-webpack en el paquete web?

webpack font awesome 5

Question

Acabo de instalar font-awesome-webpack. Lo importo usando: require("font-awesome-webpack");

La configuración de mi paquete web incluye lo siguiente en mi matriz de cargadores de módulos:

    { test: //.woff(2)?(/?v=[0-9]/.[0-9]/.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
    { test: //.(ttf|eot|svg)(/?v=[0-9]/.[0-9]/.[0-9])?$/, loader: "file-loader" }

El problema es que estoy obteniendo este error en la consola de desarrollador:

localhost/:1 GET http://localhost/mysite/app/db812d8a70a4e88e888744c1c9a27e89.woff2 
localhost/:1 GET http://localhost/mysite/app/a35720c2fed2c7f043bc7e4ffb45e073.woff 
localhost/:1 GET http://localhost/mysite/app/a3de2170e4e9df77161ea5d3f31b2668.ttf 404 (Not Found)

El problema es que esos archivos se crean en la raíz (dentro del directorio de mysite). ¿Cómo configuro para que esos woffs y ttf se envíen dentro del directorio de mysite / app?

Answer 1

A partir de febrero de 2016, esta parece ser una pregunta común con el paquete web, así que espero que esto brinde alguna ayuda. Si agrega esto al cargador: ''&name=./path/[hash].[ext]'' , eso especifica dónde buscar esos archivos. Por ejemplo:

{
    test: //.woff(2)?(/?v=[0-9]/.[0-9]/.[0-9])?$/,
    loader: ''url-loader?limit=10000&mimetype=application/font-woff&name=./[hash].[ext]''
}

Esto coloca la URL correcta a las fuentes dentro del archivo CSS generado.

Recomiendo este método cuando se trata de algo que no sea css / scss. Espero que esto ayude.

Answer 2

Además de las respuestas anteriores, II tuvo que especificar una ruta de salida para que funcione de manera tal que especifique la ubicación alojada y no escriba los recursos en la ruta raíz:

output: {
     filename: "./bundle.js",
     path: “./client”
},
module: {
       loaders[
          {
              test: //.woff(/?v=/d+/./d+/./d+)?$/,
              loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: //.woff2(/?v=/d+/./d+/./d+)?$/,
              loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: //.ttf(/?v=/d+/./d+/./d+)?$/,
              loader: "url?limit=10000&mimetype=application/octet-stream&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: //.eot(/?v=/d+/./d+/./d+)?$/,
              loader: "file?&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: //.svg(/?v=/d+/./d+/./d+)?$/,
              loader: "url?limit=10000&mimetype=image/svg+xml&name=./webpack-assets/[name]/[hash].[ext]"
            }   
  ]  // loaders
} // module 

Answer 3

Este es mi caso, porque la ruta de mi script es la siguiente:

    script(src=''/javascripts/app.js'')

Entonces, tengo que agregar ''& name. / Javascripts / [hash]. [Ext]'' a todos los archivos de fuentes como:

{
  test: //.woff(/?v=/d+/./d+/./d+)?$/,
  loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
  test: //.woff2(/?v=/d+/./d+/./d+)?$/,
  loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
  test: //.ttf(/?v=/d+/./d+/./d+)?$/,
  loader: "url?limit=10000&mimetype=application/octet-stream&name=./javascripts/[hash].[ext]"
}, {
  test: //.eot(/?v=/d+/./d+/./d+)?$/,
  loader: "file?name=./javascripts/[hash].[ext]"
}, {
  test: //.svg(/?v=/d+/./d+/./d+)?$/,
  loader: "url?limit=10000&mimetype=image/svg+xml&name=./javascripts/[hash].[ext]"
}

Answer 4

Mismo problema enfrentado.

Se solucionó usando la sintaxis siguiente,

loader: "file?name=./fonts/[hash].[ext]"

fuentes es el nombre del directorio, reemplácelo con su propio nombre de directorio.

Ejemplo:

{ 
  test: //.woff(2)?(/?v=[0-9]/.[0-9]/.[0-9])?$/, 
  loader: "url?name=/build/[hash].[ext]&limit=8192&mimetype=application/font-woff"
}

Answer 5

Recientemente, he querido usar font awesome con webpack v1, he instalado el módulo npm font-awesome not font-awesome-webpack

Debe instalar algunos cargadores antes de:

npm i css-loader file-loader style-loader url-loader

y agrégalos en tu webpack.config.js:

module: {
    loaders: [{
      test: //.css$/,
      loader: ''style!css?sourceMap''
    }, {
      test: //.woff(/?v=/d+/./d+/./d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: //.woff2(/?v=/d+/./d+/./d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: //.ttf(/?v=/d+/./d+/./d+)?$/,
      loader: "url?limit=10000&mimetype=application/octet-stream"
    }, {
      test: //.eot(/?v=/d+/./d+/./d+)?$/,
      loader: "file"
    }, {
      test: //.svg(/?v=/d+/./d+/./d+)?$/,
      loader: "url?limit=10000&mimetype=image/svg+xml"
    }]
  }

Ahora si incluye en su entry.js :

require(''font-awesome/css/font-awesome.css'');

Normalmente puede usar font-awesome en su plantilla:

<i class="fa fa-times"></i>

Esta idea me ayudó: https://gist.github.com/Turbo87/e8e941e68308d3b40ef6

Answer 6

Solo como una nota, me encontré con un error similar con el font-awesome-loader. Donde el directorio no se configuraría correctamente, independientemente de cualquiera de los cambios anteriores.

Para corregir esto, se puede agregar la opción publicPath al resultado:

output: { path: config.outputPath, filename: ''[name].js'', publicPath: ''/assets/'' },

La carpeta / assets / se cambiará a donde sea que almacene sus fuentes.

Espero que esto ayude.

Answer 7

Tenía font-awesome-webpack trabajando en mi PC, pero no funcionaría en mi Mac. Creo que mi PC todavía estaba lanzando los 404 para .woff2, .woff y .tiff, pero los íconos se mostraban correctamente, así que ignoré el problema.

Mi Mac, sin embargo, no mostraría los íconos. Mientras leía este Q & A, probé un montón de cosas. Esto es lo que llevó a mi solución:

1. En mi http://localhost:8080/View/ page, obtenía 404 que se parecía al siguiente enlace:
2. http://localhost:8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 en el navegador y confirmé el 404.
3. Intenté ir a http://localhost:8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 (eliminando la ruta adicional antes del archivo de fuente), y pude acceder al archivo.
4. Modifiqué la respuesta de Paul para eliminar el . eso hizo que la solicitud de archivo sea relativa.

Por ejemplo, Paul sugirió:

{
    test: //.woff(2)?(/?v=[0-9]/.[0-9]/.[0-9])?$/,
    loader: ''url-loader?limit=10000&minetype=application/font-woff&name=./[hash].[ext]''
}

Tome nota del parámetro &name , que usa ./[hash].[ext] . Dejé caer el líder . y ahora no hay 404 (el navegador solicita correctamente los archivos desde la raíz del sitio):

{
    test: //.woff(2)?(/?v=[0-9]/.[0-9]/.[0-9])?$/,
    loader: ''url-loader?limit=10000&minetype=application/font-woff&name=/[hash].[ext]''
}

Conclusión: si su punto de entrada NO está en su raíz web, y puede acceder a los archivos de fuente en la raíz web, probablemente solo necesite usar esta configuración de nombre para arreglar la ruta.

Answer 8

{
    test: //.(png|woff|woff2|eot|ttf|svg)(/?v=/d+/./d+/./d+)?$/,
    loader: ''url-loader?limit=100000''
}

Este esquema me ayudó