2017-02-25 72 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