Comment puis-je restreindre le format de police utilisé par Webpack/Bootstrap?

Question

Utilisation de React 16, Bootstrap 3, Webpack 2 et Typescript 2.3.

Par défaut Bootstrap comprend WOFF, WOFF2, EOT, TTF et SVG formats de police pour la police familiale Glyphicons-Halflings.

Je suis heureux de soutenir que WOFF format de police - ou tout au moins, je ne veux certainement pas faire face à EOT parce que je ne supporte pas IE8, et SVG et TTF sont fâcheusement grand.

Intégrer les polices dans mon javascript est livrable fait via cette configuration webpack:

module: { 
    rules: [ 
    {test: /\.(tsx|ts)$/, loader: "awesome-typescript-loader"}, 
    {test: /\.css$/, use: ['style-loader', 'css-loader']}, 
    {test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
     loader: 'url-loader?limit=10240', 
     options: { name: '[path][name].[ext]'}, 
    }, 
    {test: /\.js$/, enforce: "pre", loader: "source-map-loader"}, 
    ] 
}, 

Je suis en fait pas sûr de comment ça fonctionne config url-chargeur. À l'origine, j'essayais juste de faire traiter les fichiers de polices sans altérer leurs noms avec le hash de contenu. Mais Webpack les a intégrés dans le fichier javascript et j'ai décidé que cela me plaisait beaucoup mieux - surtout si je pouvais réduire la taille en supprimant les autres formats de police.

Au début, je pensais que je pouvais omettre les formats de police de la config url-loader, comme:

{test: /\.(png|woff)$/, 
     loader: 'url-loader?limit=10240', 
     options: { name: '[path][name].[ext]'}, 
    }, 

Mais cela ne fonctionne pas avec ce genre d'erreurs:

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.eot 
Module parse failed: ....\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regular.eot Unexpected character '�' (1:0) 
You may need an appropriate loader to handle this file type. 
(Source code omitted for this binary file) 
@ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 6:4445-4497 6:4520-4572 
@ ./~/bootstrap/dist/css/bootstrap.css 
@ ./src/main/ts/AppReactRoot.tsx 

Alors j'ai pensé que je pourrais peut-être remplacer la police de caractères bootstrap dans mon fichier app.css et ne spécifier qu'un seul format de police, par exemple:

@font-face { 
    font-family: "Glyphicons Halflings"; 
    src: url("~bootstrap/dist/css/bootstrap.css") format('woff'); 
    font-weight: normal; 
} 

Mais cela ne semble pas faire de différence. Le fichier app.css, si cela fait une différence, ressemble à ceci:

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 

import "bootstrap/dist/css/bootstrap.css"; 
import './app.css'; 

import {UserApp} from "app/UserApp"; 

ReactDOM.render(
    <UserApp/>, 
    document.getElementById("root") 
); 

Ainsi, la question est: Comment puis-je remplacer les valeurs par défaut Bootstrap de sorte que je suis seulement en utilisant le format de police WOFF?

Answer 1

Voici ce que j'ai trouvé.

Ajouter une police personnalisée avec uniquement les formats que vous souhaitez soutenir et dire bootstrap à utiliser à la place:

@font-face { 
    font-family: "Glyphicons Custom"; 
    src: url('~bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'); 
    font-weight: normal; 
} 

.glyphicon { 
    font-family: 'Glyphicons Custom'; 
} 

écartera les formats de polices que vous ne voulez pas de la configuration webpack en ajoutant un emitFiles=false règle du chargeur pour les formats que vous ne voulez pas. Mes règles du module webpack ressemble maintenant:

module: { 
    rules: [ 
    {test: /\.(tsx|ts)$/, loader: "awesome-typescript-loader"}, 
    {test: /\.css$/, use: ['style-loader', 'css-loader']}, 
    // small PNGs (< limit bytes) will be inlined into the js 
    // larger will be dumped into assets/appVersion 
    { test: /\.(png)$/, 
     loader: 'url-loader', 
     options: { 
     limit: 10000, 
     name: '[name].[ext]', 
     publicPath: publicAssetPath, 
     }, 
    }, 
    /* This embeds WOFF format fonts (including haflings) regardless of 
    size. Embedding to get rid of "Flash of Invisible Text" issue with 
    glyphicons. 
    */ 
    { test: /\.woff$/, loader: 'url-loader'}, 
    // filter out glyphicons font formats we don't care about 
    { test: /bootstrap.dist.fonts.glyphicons-halflings-regular\.(woff|eot|svg|ttf|woff2)$/, 
     loader: 'file-loader?emitFile=false' 
    }, 
    {test: /\.js$/, enforce: "pre", loader: "source-map-loader"}, 
    ] 
}, 

Notez qu'il y aura maintenant une deuxième petite url de données font-woff dans votre javascript qui contient le code module.exports = __webpack_public_path__ + "fa2772327f55d8198301fdb8bcfc8158.woff"; Je ne sais pas pourquoi il émission de cela.

Le problème avec le code url-loader dans la question initiale est que vous ne pouvez pas utiliser les deux paramètres d'URL dans la propriété loaderet la propriété options. Mon paramètre limit a été ignoré et url-loader semble prendre cela comme signifiant qu'il devrait tout intégrer.