Question

我正在创建一个angular2应用程序，并且我尝试使用包字体-awesome-webpack的font-awesome。最重要的是，目前，我只看到一个小方块出现。此外，在＆＃34; Google Developer Toolbar＆＃34;中，我可以看到：

无法解码下载的字体： http://dev-sp-build.sfpd.fgov.be:3000/af7ae505a9eed503f8b8e6982036873e.woff2 版本：1 OTS解析错误：无效的版本标记版本：1失败解码下载的字体： http://dev-sp-build.sfpd.fgov.be:3000/fee66e712a8a08eef5805a46892932ad.woff 版本：1 OTS解析错误：无效的版本标记版本：1失败解码下载的字体： http://dev-sp-build.sfpd.fgov.be:3000/b06871f281fee6b241d60582ae9369b9.ttf 版本：1 OTS解析错误：无效的版本标记

所以我猜这个问题与字体文件有关。

我的文件夹结构如下：

/
   /dist
   /src
      /app
   /webpack
   index.html

这是我的webpack配置：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts'
    },

    resolve: {
        extensions: ['', '.ts', '.js']
    },

    output: {
        path: helpers.root('dist'),
        publicPath: '/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

    module: {
        loaders: [
          {
              test: /\.ts$/,
              loaders: ['awesome-typescript-loader', 'angular2-template-loader']
          },
          {
              test: /\.html$/,
              loader: 'html'
          },
          {
              test: /\.(png|jpe?g|gif|ico)$/,
              loader: 'file?name=assets/[name].[hash].[ext]'
          },
          {
              test: /\.css$/,
              exclude: helpers.root('src', 'app'),
              loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
          },
          {
              test: /\.css$/,
              include: helpers.root('src', 'app'),
              loader: 'raw'
          },
          {
              test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
              loader: "url-loader?limit=10000&mimetype=application/font-woff"
          },
          {
              test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
              loader: "file-loader"
          }
        ]
    },

    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
          name: ['app', 'vendor', 'polyfills']
      }),
      new ExtractTextPlugin('[name].css')
    ]
};

我的＆＃34; index.html＆＃34;如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>Administration</title>

        <base href="/">
    </head>
    <body>
        <app-admin></app-admin>

        <script src="/dist/polyfills.js"></script>
        <script src="/dist/vendor.js"></script>
        <script src="/dist/app.js"></script>
    </body>
</html>

最后，＆＃34; main.ts＆＃34;文件包含以下行：

require('font-awesome-webpack');

请注意，当我点击＆＃34; Google Developer工具栏＆＃34;中的警告消息中的网址时，Chrome会正确显示字体，所以我真的不知道它是怎么来的＆＃39 ;加载它。

另请注意，我不想使用＆＃34; webpack-dev-server＆＃34;，这就是为什么我把＆＃34; index.html＆＃34;在该级别（该项目还包含WCF Web服务）。

font-awesome-webpack和angular 2

0 个答案: