[HELP] Missing fonts after compile with Webpack
Question
The project is using webpack to compile the project in order to distribute as bundle, it's a kind of plugin using GrapesJS as editor, everything works fine except the fonts loaded by GrapesJS are missing, when running with webpack-dev-server everything looks fine, but when building with webpack and try to run on a simple server (different folder using dist files) it looks like:

And now with webpack-dev-server on project directory

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const environment = process.env.NODE_ENV || 'development'
module.exports = {
entry: ['regenerator-runtime/runtime', './src/index'],
devtool: 'source-map',
output: {
path: __dirname + '/dist',
filename: 'plugin-editor.js',
library: ['PluginEditor'],
libraryTarget: 'umd'
},
devServer: {
historyApiFallback: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
use: [
'style-loader', // creates style nodes from JS strings
'css-loader', // translates CSS into CommonJS
'sass-loader' // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(environment)
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html'
})
]
}
Also worth to mention that I have copied the src/styles folder from the project GrapesJS with the intuit of better customize colors and details. And all fonts generated on /dist folder are loaded on index.html when loaded on another folder. The project is loaded on another folder using command python -m SimpleHTTPServer 3000
Answers (3)
using outputPath option, you specify the output folder where webpack will emit files. and based on you saying:
running with webpack-dev-server everything looks fine project is loaded on another folder
it seems to be an output path problem. sorry if this was not helpful.
Great, thanks @pouyamiralayi I'll double check the outputPath this night
did you try using file-loader instead of url-loader for ttf or other font types?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3412
BUG: Auto save is working partially and stops working after inserting text
hello guys. I am using this awesome project for a production app written with React.js, So I integrated it inside my app. everything works...
Issue #952
Responsive email template builder using Grapes js
@ateshuseyin @artf - Thanks for the great plugin. We started to use Grapes js in our project as an editor for building responsive email tem...
Issue #2799
[Questions] Ordering of selector with id and class selectors, space after id-selector
I am currently working on a web application for which we integrate this project as GUI editor to customize the environments. Our GUI compon...
Issue #1470
[Question] Possible memory leaks
Hi, I am working on a project with Angular 6 and I am investigating a memory leak after destroying the editor on _previousAttributes and po...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.