Issue #2320Opened October 9, 2019by eduardonunesp2 reactions

[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:

image

And now with webpack-dev-server on project directory

image

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)

pouyamiralayiOctober 10, 20191 reactions

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.

eduardonunespOctober 10, 20191 reactions

Great, thanks @pouyamiralayi I'll double check the outputPath this night

pouyamiralayiOctober 9, 20190 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.