Webpack + angular 2不能正確加載字體

我想用webpack配置最新的Angular2而不使用角度CLI。但是當我嘗試構建一個項目時，它始終顯示關於fontawesome字體的錯誤。例如：Webpack + angular 2不能正確加載字體

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() { 
    } 

}

來源

2017-06-18 Maris

在配置文件中更改測試。

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

來源

2017-06-18 17:57:56 CharanRoot

現在，它的工作原理，但我得到另一個錯誤： 'ERROR在./~/css-loader!./~/less-loader!./Content/custom/style.less模塊未找到：錯誤：無法解析'文件'或'目錄'../fonts/glyphicons-halflings-regular.ttf' – Maris

看起來像現在url不會被編譯的少文件中被替換？ – Maris

Webpack + angular 2不能正確加載字體

回答

相關問題