2017-02-25 38 views
0

所以我是Angular和Webpack的新手,我已經在Visual Studio中設置了一個Angular2項目:http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/,它使用由Mads Kristensen創建的ASP.NET Core模板包( https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePackAngular2模板項目中的Favicon位置

我無法弄清楚我需要放置我的圖標(或任何圖像),以便它們通過Webpack分發。

favicon.ico應該被複制到wwwroot文件夾嗎?

_Layout.cshtml

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
     <title>The Matter Of Faith</title> 
     <base href="/" /> 
     <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" /> 
     <link rel='shortcut icon' type='image/x-icon' href='@Url.Content("~/favicon.ico")' /> 
    </head> 
    <body> 
     @RenderBody() 

     @RenderSection("scripts", required: false) 
    </body> 
</html> 

的WebPack配置:

var sharedConfig = { 
    resolve: { extensions: [ '', '.js', '.ts' ] }, 
    output: { 
     filename: '[name].js', 
     publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
    }, 
    module: { 
     loaders: [ 
      { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }, 
      { test: /\.html$/, loader: 'raw' }, 
      { test: /\.css$/, loader: 'to-string!css' }, 
      { test: /\.(png|jpg|jpeg|gif|ico|svg)$/, loader: 'url', query: { limit: 25000 } } 
     ] 
    } 
}; 

文件結構:

enter image description here

回答

0

是該圖標需要在網站根 - 我最近發現這個優秀的免費工具爲m生成多個favicons多個設備,也有相關的HTML。爲您生成的HTML還解釋了放置圖標文件的位置。

試試看http://realfavicongenerator.net