gulp iconfontCssからWebpack

Question

私はgulpからwebpackに完全に切り替わりたいですが、まだ私は良い解決策を探しています。

何本一気タスクを達成：

• はsrc/assets/icons/**/*
• 内のすべてのsvgsを取りフォント（TTF、EOT、WOFF ...）
• を作成し、それぞれについてsrc/assets/css/icons_template.scssicons.scssファイルの作成クラスへの感謝を生成しますアイコン

マイGulpfile

var gulp = require('gulp'); 
var iconfont = require('gulp-iconfont'); 
var iconfontCss = require('gulp-iconfont-css'); 

gulp.task('icons', function() { 
    return gulp.src('src/assets/icons/**/*') 
     .pipe(iconfontCss({ 
      fontName: 'myapp-icons', 
      path: 'src/assets/css/icons_template.scss', 
      fontPath: '../fonts/icons/', 
      targetPath: '../../css/icons.scss', 
      cssClass: 'mu-icon' 
     })) 
     .pipe(iconfont({ 
      fontName: 'myapp-icons', 
      formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'], 
      normalize: true, 
      centerHorizontally: true 
     })) 
     .pipe(gulp.dest('src/assets/fonts/icons')) 
}); 

gulp.task('default', function() { 
    gulp.start('icons'); 
}); 

私が使用するテンプレート：ここ

//src/assets/css/icons_template.scss 
@font-face { 
    font-family: "<%= fontName %>"; 
    src: url(<%= fontPath %><%= fontName %>.eot); 
    src: url(<%= fontPath %><%= fontName %>.eot?#iefix) format('eot'), 
    url(<%= fontPath %><%= fontName %>.woff2) format('woff2'), 
    url(<%= fontPath %><%= fontName %>.woff) format('woff'), 
    url(<%= fontPath %><%= fontName %>.ttf) format('truetype'), 
    url(<%= fontPath %><%= fontName %>.svg#<%= fontName %>) format('svg'); 
} 

@mixin <%= cssClass%>-styles { 
    font-family: "<%= fontName %>"; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: normal; 
    // speak: none; // only necessary if not using the private unicode range (firstGlyph option) 
    text-decoration: none; 
    text-transform: none; 
} 

%<%= cssClass%> { 
    @include <%= cssClass%>-styles; 
} 

@function <%= cssClass%>-char($filename) { 
    $char: ""; 
<% _.each(glyphs, function(glyph) { %> 
    @if $filename == <%= glyph.fileName %> { 
    $char: "\<%= glyph.codePoint %>"; 
}<% }); %> 

@return $char; 
} 

@mixin <%= cssClass%>($filename, $insert: before, $extend: true) { 
&:#{$insert} { 
    @if $extend { 
    @extend %<%= cssClass%>; 
    } @else { 
    @include <%= cssClass%>-styles; 
    } 
    content: <%= cssClass%>-char($filename); 
} 
} 

<% _.each(glyphs, function(glyph) { %>.<%= cssClass%>-<%= glyph.fileName %> { 
    @include <%= cssClass%>(<%= glyph.fileName %>); 
} 
<% }); %> 

Answer 1

は、私はWebPACKのをどうする管理するものである：

使用webfonts-loader

はmyapp.font.jsファイル

module.exports = { 
    'files': [ 
     './icons/*.svg' 
    ], 
    'cssTemplate': './fonts/myapp_icons_template.css.tpl', 
    'fontName': 'myapp-icons', 
    'classPrefix': 'myapp-icon-', 
    'baseSelector': '.myapp-icon', 
    'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'], 
    'fileName': 'myapp-icons.[ext]' 
}; 

を追加します。

前のファイルをインポートした後にこれをwebpackローダーに追加：

 { 
      test: /\.font\.js/, 
      loaders: [ 
       'style-loader', 
       'css-loader', 
       'webfonts-loader' 
      ] 
     }, 

スタイルは直接コピーされます。ton index.html