Webpack-dev-server: webpack dev server can't load fonts by file-loader

Created on 18 Apr 2018 · 7Comments · Source: webpack/webpack-dev-server

Operating System: window7
Node Version: 6.14.1
NPM Version: 3.10.10
webpack Version: 4.5
webpack-dev-server Version: 3.1.3

[x ] This is a bug
[ ] This is a modification request

Code

//package.json
{
  "scripts": {
    "build": "webpack  --config webpack.config.js",
    "dev": "webpack-dev-server --config  webpack.config.js"
  },
  "devDependencies": {
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.11",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "3.1.3"
  },
  "dependencies": {
    "font-awesome": "^4.7.0"
  }
}

``js // webpack.config.js module.exports = { mode: 'development', entry: './src/app.js', devtool: 'cheap-module-source-map', output: { path: __dirname + '/dist', filename: 'build.js', publicPath: '/', }, module: { rules: [ { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' }, { test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: [{ loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'fonts/', publicPath: url =>../fonts/${url}`
}
}]
}
],
},
devServer: {
clientLogLevel: 'warning',
historyApiFallback: true,
hot: true,
publicPath: "/",
inline: true,
overlay: true,
contentBase: 'dist',
host: 'localhost',
port: 9001
},
watch: true,
};

```js
  // app.js
import './style.scss';

```scss
// style.scss
@import '~font-awesome/css/font-awesome.css';

```html
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Loading Fonts with Webpack - Chris Courses</title>
</head>
<body>
    <h1>Loading Fonts with Webpack - Chris Courses</h1>
    <i class="fa fa-check fa-lg"></i>
    <script type="text/javascript" src="build.js"></script>
</body>
</html>

Expected Behavior

request the url localhost:9001, it can load the awesome fonts in dist when start dev server

Actual Behavior

can not load the awesome fonts when start dev server.
but if we user cli: yarn build, it can output the fonts in the dist directory.

For Bugs; How can we reproduce the behavior?

you can install this repo, when start the webpack dev server, it only show the words, not show the font icon.
and it's similar as the issue#4111.

Source

se7en00

Most helpful comment

@se7en00 I see you closed this issue, is this fixed? If yes, how did you fix it?

ItsJepser on 6 Dec 2018

👍6

All 7 comments

@se7en00 remove devServer.publicPath

alexander-akait on 7 May 2018

thanks @evilebottnawi
I tried this, but it's failed.
I changed the file-loader config below, the dev server can load the fonts now.

 name: 'fonts/[name].[ext]',
 mimetype: 'application/font-woff',
 publicPath: '../'

se7en00 on 9 May 2018

👍4

@se7en00 I see you closed this issue, is this fixed? If yes, how did you fix it?

ItsJepser on 6 Dec 2018

👍6

I had the same issue and I fixed it by changing the name property from starting with a / (which resulted in an absolute path) to a ./ (which is a relative path). My config:

{
  test: /\.(woff|woff2)$/,
  loader: 'url-loader',
  options: {
    limit: 4096,
    name: './fonts/[name].[ext]?[hash]', // was '/fonts/[name].[ext]?[hash]',
  },
},

LukasBombach on 25 Feb 2019

👍2

Same problem and same solution ./

works

const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const FailPlugin = require('webpack-fail-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  mode: 'development',
  devServer: {
    contentBase: [path.join(process.cwd(), conf.paths.src)],
    port: 8080,
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.json$/,
        use: [
          'json-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'eslint-loader',
        enforce: 'pre'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {loader: 'postcss-loader', options: {plugins: () => [autoprefixer]}}
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-loader'
        ]
      },
      {
        test: /\.html$/,
        use: [
          'html-loader'
        ]
      },
      {
        test: /\.(ttf|eot|svg|png|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [{
          loader: 'file-loader', options: {name: './img/[name].[ext]'}
        }]
      }
    ]
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    FailPlugin,
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],
  devtool: 'source-map',
  output: {
    path: path.join(process.cwd(), conf.paths.tmp),
    filename: 'index.js'
  },
  entry: `./${conf.path.src('index')}`
};

not works

const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const FailPlugin = require('webpack-fail-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  mode: 'development',
  devServer: {
    contentBase: [path.join(process.cwd(), conf.paths.src)],
    port: 8080,
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.json$/,
        use: [
          'json-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'eslint-loader',
        enforce: 'pre'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {loader: 'postcss-loader', options: {plugins: () => [autoprefixer]}}
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-loader'
        ]
      },
      {
        test: /\.html$/,
        use: [
          'html-loader'
        ]
      },
      {
        test: /\.(ttf|eot|svg|png|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [
          'file-loader?name=/img/[name].[ext]', {
          loader : 'file-loader', options: {name : "./img/[name].[ext]"}
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    FailPlugin,
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],
  devtool: 'source-map',
  output: {
    path: path.join(process.cwd(), conf.paths.tmp),
    filename: 'index.js'
  },
  entry: `./${conf.path.src('index')}`
};

ripper2hl on 10 Apr 2019

👍1

I am using webpack with scss and that stuff. My solution was:
{
test: /.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
use: [{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'application/font-woff', publicPath: '../' }
}]
}