Issue #2320💬 RespondidoAbierto el 9 de octubre de 2019por eduardonunespReacciones 2

Faltan fuentes tras compilar con Webpack

Respuesta rápidapor pouyamiralayi1

usando la opción outputPath, especificas la carpeta de salida donde el webpack emitirá archivos. y basándote en que tú dijiste:funcionando con webpack-dev-server, todo parece estar bien El proyecto se carga en otra carpeta Parece ser un problema de ruta de salida. Perdón si esto no ha sido útil.

Lee la respuesta completa abajo ↓

Pregunta

El proyecto está usando webpack para compilar el proyecto y distribuirlo como paquete, es una especie de plugin que usa GrapesJS como editor, todo funciona bien excepto que faltan las fuentes cargadas por GrapesJS, cuando ejecuto con 'webpack-dev-server' todo se ve bien, pero al compilar con webpack e intentar ejecutarlo en un servidor simple (carpeta diferente usando archivos dist) se ve:

! imagen

Y ahora con 'webpack-dev-server' en el directorio del proyecto

! imagen

'''js const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin')

entorno const = process.env.NODE_ENV || 'desarrollo'

module.exports = { Entrada: ['Tiempo de ejecución/Tiempo de ejecución del regenerador', './SRC/Index'], devtool: 'source-map', salida: { camino: __dirname + '/dist', Nombre del archivo: 'plugin-editor.js', biblioteca: ['PluginEditor'], libraryTarget: 'umd' }, devServer: { historyApiFallback: cierto }, módulo: { Reglas: [ { prueba: /.js$/, excluir: /node_modules/, Cargador: 'Babel-cargador' }, { prueba: /.scss$/, Uso: [ 'style-loader', // crea nodos de estilo a partir de cadenas JS 'css-loader', // traduce CSS a CommonJS 'sass-loader' // compila Sass a CSS, usando Node Sass por defecto ] }, { prueba: /.css$/, Uso: ['Cargador de estilo', 'Cargador CSS'] }, { Prueba: /. (PNG|jpe?g|gif|SVG|eot|tTf|woff|woff2)$/, Cargador: 'Cargador de URL', Opciones: { límite: 10000 } } ] }, Plugins: [ Nuevo webpack. DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(entorno) }), new HtmlWebpackPlugin({ Nombre del archivo: 'index.html', Plantilla: 'index.html' }) ] }


También vale la pena mencionar que he copiado la carpeta 'src/styles' del proyecto 'GrapesJS' con la intuición de personalizar mejor los colores y detalles. Y todas las fuentes generadas en la carpeta '/dist' se cargan en 'index.html' cuando se cargan en otra carpeta. El proyecto se carga en otra carpeta usando el comando 'python -m SimpleHTTPServer 3000'

Respuestas (3)

pouyamiralayi10 de octubre de 2019

usando la opción outputPath, especificas la carpeta de salida donde el webpack emitirá archivos. y basándote en que tú dijiste:

funcionando con webpack-dev-server, todo parece estar bien El proyecto se carga en otra carpeta

Parece ser un problema de ruta de salida. Perdón si esto no ha sido útil.

eduardonunesp10 de octubre de 2019

Genial, gracias @pouyamiralayi esta noche revisaré el outputPath

pouyamiralayi9 de octubre de 2019

¿Has probado a usar ''file-loader'' en lugar de ''url-loader'' para ''ttf'' u otros tipos de fuente?

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.