从Webpack 1升级到Webpack 2后未加载的字体

时间:2017-02-14 14:09:42

标签: fonts glyphicons webpack-2 urlloader webpack-file-loader

我刚刚升级了ny webpack.config.js以与Webpack 2兼容,现在我的Glyphicons已经找不到了。

这是从旧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]
     }
  ]
},

这是新的Webpack 2配置,但不起作用。

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-loader正在运行,我确实在构建生产版本时会将字体发送到/dist/css/fonts/,但是我的开发版本使用{{ 1}}不像以前那样提供字体,在浏览器中我为webpack-dev-server获得了404

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

Webpack 2,Sass加载器和Webpack Dev Server可能存在一些不兼容的问题吗?

0 个答案:

没有答案