Fonts 从网页包1升级到网页包2后未加载字体

我刚刚升级了ny

webpack.config.js

以与webpack 2兼容，现在我的图标已经找不到了

这是从旧的Webpack 1配置中提取的，它确实起作用

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]
     }
  ]
},

这是新样式的Webpack2配置，无法正常工作

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/')
      }
    })
  ]
}

这与之前相同，因此

sass加载器

正在工作，我确实看到在构建我的生产版本时，字体被发送到

/dist/css/font/

，但我的开发版本，使用

webpack的dev服务器

没有像以前那样提供字体，在浏览器中我得到了一个404的

http://localhost:8080/css/fonts/glyphicons-普通半身人。woff2

我已将所有依赖项更新为其最新版本

---

是否与Webpack 2、Sass加载程序和Webpack Dev服务器存在某些不兼容性？

为什么还有

ttf

和

eot

？如果您同时提供WOFF，那么第一个问题毫无意义：没有浏览器正确支持TTF格式的webfonts，但不正确支持WOFF（您可能会认为“Android”，但Android在4.3之前根本不支持webfonts，无论您使用的是WOFF还是TTF），2016年1月，微软最终关闭了IE8及以下版本，正式放弃了对IE8及以下版本的所有形式的支持，并取消了eot格式，从而使后者变得过时。（修剪eot/ttf不会解决您的问题，但仍然很重要）有趣。我来修剪一下。感谢您，实际上，

ttf

和

eot

仍在引导sass中引用，因此，在它们正式从这些sass中删除之前，我会将它们保留在我的webpack配置中。这没有多大意义：引导比您能够跟上webfonts的状态慢得多，所以在引导之前对它们进行修剪（现在使用的格式确实不好）是更明智的方法。Bootstrap可能仍然包含旧式站点的

eot

（我怀疑您没有在使用这些站点）和

ttf

与

woff

搭配使用是毫无意义的。仅仅因为Bootstrap做了错误的事情，就没有理由效仿=）（fontsquirrel也是如此-他们正在生成非常糟糕的字体包，因为他们在2012年停止更新格式）