Question

我正在尝试使用webpack配置最新的Angular2而不使用angular CLI。但是当我尝试构建一个项目时，它总是显示有关fontawesome字体的错误。例如：

ERROR in ./Content/fonts/fontawesome-webfont.svg?v=4.7.0
Module parse failed: somewhere\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

这是我的webpack模块配置：

config.module = {
    loaders: [{
            test: /\.ts$/,
            loader: 'ts',
            query: {
                'ignoreDiagnostics': [
                    2403, // 2403 -> Subsequent variable declarations
                    2300, // 2300 -> Duplicate identifier
                    2374, // 2374 -> Duplicate number index signature
                    2375, // 2375 -> Duplicate string index signature
                    2502 // 2502 -> Referenced directly or indirectly
                ]
            },
            exclude: [/node_modules\/(?!(ng2-.+))/]
        },

        // copy those assets to output
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file?name=fonts/[name].[hash].[ext]?'
        },

        // Support for *.json files.
        {
            test: /\.json$/,
            loader: 'json'
        },

        // Load css files which are required in vendor.ts
        {
            test: /\.css$/,
            exclude: root('Scripts', 'app'),
            loader: "style!css"
        },

        // Extract all files without the files for specific app components
        {
            test: /\.less$/,
            loader: 'style!css!less'
        },

        // Extract all files for specific app components
        {
            test: /\.html$/,
            loader: 'raw'
        }
        // {
        //     test: /jquery\.js/,
        //     loader: 'null-loader',
        //     exclude: path.resolve('node_modules/jquery/')
        // }
    ],
    postLoaders: [],
    noParse: [/.+zone\.js\/dist\/.+/, /.+angular2\/bundles\/.+/, /angular2-polyfills\.js/, /jquery-ui\.js/, /jquery\.js/]
};

package.json中的webpack版本 - “2.6.1”

这是我的组件，参考我的较少风格：

@Component({
  selector: 'my-app',
  template: require('./app.component.html'),
  styles: [require('../../../Content/custom/style.less')]
})
export class AppComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

在配置文件中更改测试。

test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?\S*)?$/,
            loader: 'file?name=fonts/[name].[hash].[ext]?'

Webpack + angular 2未正确加载字体

1 个答案: