2

I've just upgraded ny webpack.config.js to be compatible with Webpack 2 and now my Glyphicons are no longer found.

This is an extract from the old Webpack 1 config that did work

module: {
  loaders: [
    {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
    },
    {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]"
    },
    {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]"
    },
    {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/octet-stream&name=/css/fonts/[name].[ext]"
    },
    {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file?name=/css/fonts/[name].[ext]"
    },
    {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=image/svg+xml&name=/css/fonts/[name].[ext]
     }
  ]
},

And this is the new style Webpack 2 config that doesn't work.

const webpack            = require('webpack')
const path               = require('path')
const ExtractTextPlugin  = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index.jsx'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.json', '.jsx'],
    modules: [
      path.join(__dirname, 'src'),
      "node_modules"
    ]
  },
  devtool: '#source-map',
  module: {
    noParse: /node_modules\/localforage\/dist\/localforage.js/,
    rules: [
      {
        test: /\.jsx?$/,
        include: path.join(__dirname, 'src'),
        use: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader' ]})
      },
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,  use: "url-loader?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]" },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, use: "url-loader?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,   use: "url-loader?limit=10000&mimetype=application/octet-stream&name=/css/fonts/[name].[ext]" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,   use: "file-loader?name=/css/fonts/[name].[ext]" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,   use: "url-loader?limit=10000&mimetype=image/svg+xml&name=/css/fonts/[name].[ext]" }
    ]
  },
  devServer: {
    contentBase: './dist',
    hot: true,
    inline: true,
    historyApiFallback: true
  },
  plugins: [
    new CleanWebpackPlugin(['dist'], {
      exclude: ['images', 'index.html', 'favicon.ico', '_redirects']
    }),
    new webpack.optimize.CommonsChunkPlugin({name: 'common', filename: 'common.js'}),
    new ExtractTextPlugin({filename: 'css/styles.css', allChunks: true}),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('development'),
        'socketURI': JSON.stringify('http://localhost:3000/')
      }
    })
  ]
}

Which is the same as previously, so the sass-loader is working, and I do see the fonts get emitted to /dist/css/fonts/ when I build my production version, but my development version, which uses webpack-dev-server is not serving the fonts up as it used to and in the browser I get a 404 for http://localhost:8080/css/fonts/glyphicons-halflings-regular.woff2

I've updated all dependencies to their latest versions.

Is there perhaps some incompatability with Webpack 2, the Sass loader, and the Webpack Dev Server?

Dave Sag
  • 13,266
  • 14
  • 86
  • 134
  • Why do you still have `ttf` and `eot` in there? The first makes no sense if you're also serving WOFF: there are no browsers that properly support webfonts in TTF format but don't properly support WOFF (You might think "Android", but Android did not support webfonts properly at all until 4.3, regardless of whether you used WOFF or TTF), and the latter was made obsolete in January of 2016 when Microsoft finally shut down IE8 and below, officially dropping all forms of support for them, and killing off the eot format. (pruning eot/ttf won't solve your problem, but is still important) – Mike 'Pomax' Kamermans Feb 14 '17 at 16:15
  • interesting. I'll prune those. thanks – Dave Sag Feb 14 '17 at 23:19
  • actually `ttf` and `eot` are still referred to in the bootstrap sass so until they are formally removed from those I'll keep them in my webpack config. – Dave Sag Feb 14 '17 at 23:33
  • 1
    That doesn't make a lot of sense: bootstrap is much slower to catch up to the state of webfonts than you can be, so pruning them ahead of bootstrap (they are *literally* bad formats to use these days) is the far more sensible approach. Bootstrap may still contain `eot` for legacy sites (which I suspect you're not working on) and `ttf` paired with `woff` never made sense. Just because bootstrap is doing the wrong thing there is no reason to follow suit =) (same for fontsquirrel - they are generating WILDLY bad font packs because they stopped updating formats in 2012) – Mike 'Pomax' Kamermans Feb 15 '17 at 01:08

0 Answers0