Faltan fuentes tras compilar con Webpack
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)
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.
Genial, gracias @pouyamiralayi esta noche revisaré el outputPath
¿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.
Issue #3699
El flotamiento de la celda desplaza aleatoriamente a la celda real
¡Hola! Estoy usando grapesJs para editar correos electrónicos en un proyecto de mi empresa, con el plugin Newsletter. Todo funciona muy bie...
Issue #3412
El guardado automático funciona parcialmente y deja de funcionar tras insertar texto
Hola a todos. Estoy usando este proyecto increíble para una aplicación de producción escrita con React.js, así que lo integré dentro de mi...
Issue #2700
[Bug] Resultado del editor de pasar el cursor en TypeError: this[0].getAttribute no es una función
¿Estás usando la última versión (las versiones anteriores NO están soportadas)? Sí, usando la última versión v0.16.3. ¿Qué pasó? Actualizad...
Issue #1150
[Pregunta] Obtén subidas como Base64
Hola a todos, Necesito ayuda para integrar esto en una aplicación web que tengo. Todo se renderiza y funciona como se espera, pero estoy in...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →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.