Fonts not showing when i build for production with webpack

Questions
1

Hi, can you help me with this? When i build for dev it’s fine but in the prod mode fonts are not loaded.

My import is like below:
import from ‘ionicons/dist/css/ionicons.min.css’;

I used this to build for production:

2

We need more info. This webpack config is useless.

  • Is it web app or cordova app?
  • Any errors in console?
  • How do you include icons?
  • What icons?
  • How do you use icons?
  • etc.
3

No errors in the console, it builds fine.

app.js:
import Ionicons from ‘ionicons/dist/css/ionicons.min.css’;

I this example, see screenshot the fonts folder is loaded, but when i build for prod the fonts folder is not loaded.

Web app, the build is fine and in dev mode i see the icons but in prod i don’t. I import the ionicons set.

21
Schermafbeelding 2019-10-07 om 15.25.21.png754×826 57.9 KB

4

app.js:
import Ionicons from ‘ionicons/dist/css/ionicons.min.css’;

webpack.config.prod.js
const webpack = require(‘webpack’);
const CopyWebpackPlugin = require(‘copy-webpack-plugin’);
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
const OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin’)
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)

const path = require(‘path’);

function resolvePath(dir) {
return path.join(__dirname, ‘…’, dir);
}

module.exports = {
mode: ‘production’,
entry: [
‘./src/app.js’
],

output: {
path: resolvePath(‘www’),
filename: ‘app.js’,
publicPath: ‘’
},
resolve: {
extensions: [’.js’, ‘.vue’, ‘.json’],
alias: {
‘vue$’: ‘vue/dist/vue.esm.js’,
‘@’: resolvePath(‘src’),
}
},
devServer: {
hot: true,
open: true,
compress: true,
contentBase: ‘/www/’,
watchOptions: {
poll: true
}
},
module: {
rules: [
{
test: /.js$/,
use: ‘babel-loader’,
include: [
resolvePath(‘src’),
resolvePath(‘node_modules/framework7’),
resolvePath(‘node_modules/framework7-vue’),
resolvePath(‘node_modules/template7’),
resolvePath(‘node_modules/dom7’),
resolvePath(‘node_modules/ssr-window’),
],
},
{
test: /.vue$/,
use: ‘vue-loader’,
},
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader’,
],
},
{
test: /.styl(us)?$/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader’,
‘stylus-loader’,
],
},
{
test: /.less$/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader’,
‘less-loader’,
],
},
{
test: /.(png|jpe?g|gif|svg)(?.)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: ‘images/[name].[hash:7].[ext]’
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: ‘media/[name].[hash:7].[ext]’
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: ‘fonts/[name].[hash:7].[ext]’
}
}
]
},
plugins: [
new webpack.DefinePlugin({
‘process.env’: JSON.stringify(‘production’),
}),
new UglifyJsPlugin({
uglifyOptions: {
warnings: false
},
sourceMap: true,
parallel: true
}),
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true,
map: { inline: false }
}
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename: ‘./index.html’,
template: ‘./src/index.html’,
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
},
}),
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
new MiniCssExtractPlugin({
filename: ‘app.css’
}),
new CopyWebpackPlugin([{
from: resolvePath(‘static’),
to: resolvePath(‘www/static’),
}]),
]
}

5

Not sure, still hard to say, your code looks totally correct to me. After the prod build, is the fonts files actually in your build destination folder?

6

Yes they are, but i found another solution. I just downloaded the CSS from the Ionicons website together with the font files and imported it from my own source instead of importing as node_module

like so:
import ‘./css/ionicons.css’;

Works fine now, still weird that it worked fine in dev with npm start but not on my prod build.