Added options publicPath to fonts configuration

GilbertoTomasone · Mar 9, 2020 · 8b68642 · 8b68642
1 parent 70cd7cb
commit 8b68642
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -146,6 +146,7 @@ module.exports = {
     ],
     inputPath: path.resolve(__dirname, 'assets/fonts'),
     outputPath: 'fonts',
+    publicPath: '/',
     fontFilename: '[fontname].[chunkhash].[ext]?[hash]',
     cssDest: path.resolve(__dirname, 'styles/fonts'),
     cssFilename: 'fonts',
@@ -316,6 +317,7 @@ fonts: {
     ],
     inputPath: path.resolve(__dirname, 'assets/fonts'),
     outputPath: 'fonts',
+    publicPath: '/',
     fontFilename: '[fontname].[chunkhash].[ext]?[hash]',
     cssDest: path.resolve(__dirname, 'styles/fonts'),
     cssFilename: 'fonts',
@@ -335,6 +337,7 @@ fonts: {
 | **[`files`](#files)**                               | `{Array}`  | `true`   | `undefined`                      |
 | **[`inputPath`](#inputpath)**                       | `{String}` | `true`   | `undefined`                      |
 | **[`outputPath`](#outputpath)**                     | `{String}` | `false`  | `iconfont/`                      |
+| **[`publicPath`](#publicpath)**                     | `{String}` | `false`  | `/`                              |
 | **[`fontFilename`](#fontfilename)**                 | `{String}` | `false`  | `[fontname].[hash].[ext]`        |
 | **[`cssDest`](#cssDest)**                           | `{String}` | `false`  | `false`                          |
 | **[`cssFilename`](#cssfilename)**                   | `{String}` | `false`  | `iconfont`                       |
@@ -379,6 +382,18 @@ Default: `iconfont/`
 The path relative to the default Webpack output folder where to save 
 the fonts files.
 
+#### `publicPath`
+
+Required: `false`
+
+Type: `String`
+
+Default: `/`
+
+This is the URL prefix for the generated font url 
+(e.g. /static/ or https://cdn.project.net/). 
+Should typically match Webpack's config.output.publicPath.
+
 #### `fontFilename`
 
 Required: `false`
@@ -541,7 +556,7 @@ icons: {
 | **[`outputPath`](#outputpath-1)**                     | `{String}` | `false`  | `fonts/`                                 |
 | **[`types`](#types)**                                 | `{Array}`  | `false`  | `['eot', 'woff', 'woff2', 'ttf', 'svg']` |
 | **[`order`](#order)**                                 | `{Array}`  | `false`  | `['eot', 'woff', 'woff2', 'ttf', 'svg']` |
-| **[`publicPath`](#publicpath)**                       | `{String}` | `false`  | `/`                                      |
+| **[`publicPath`](#publicpath-1)**                       | `{String}` | `false`  | `/`                                      |
 | **[`fontName`](#fontname)**                           | `{String}` | `false`  | `IconFont`                               |
 | **[`fontFilename`](#fontfilename-1)**                 | `{String}` | `false`  | `[fontname].[hash].[ext]`                |
 | **[`cssDest`](#cssDest-1)**                           | `{String}` | `false`  | `false`                                  |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "multifonts-loader",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "A webpack loader to generate all your fontfaces and iconfonts in one go.",
   "main": "./index.js",
   "scripts": {

diff --git a/src/loader.js b/src/loader.js
@@ -79,6 +79,7 @@ function loader (content, map, meta) {
     fontfaceTemplateSCSS: assetConfig.fonts.fontfaceTemplateSCSS || path.resolve(__dirname, '../templates', 'fontface-scss.hbs'),
     inputPath: assetConfig.fonts.inputPath || false,
     outputPath: assetConfig.fonts.outputPath || 'fonts',
+    publicPath: assetConfig.fonts.publicPath || '/',
     fontFilename: assetConfig.fonts.fontFilename || '[fontname].[hash].[ext]',
     cssDest: assetConfig.fonts.cssDest || false,
     cssFilename: assetConfig.fonts.cssFilename || 'fonts',
@@ -98,6 +99,7 @@ function loader (content, map, meta) {
   // Add trailing slash to paths
   if (fontsOptions.inputPath !== false && fontsOptions.inputPath.substr(-1) !== '/') fontsOptions.inputPath += '/';
   if (fontsOptions.outputPath !== false && fontsOptions.outputPath.substr(-1) !== '/') fontsOptions.outputPath += '/';
+  if (fontsOptions.publicPath !== false && fontsOptions.publicPath.substr(-1) !== '/') fontsOptions.publicPath += '/';
   if (fontsOptions.cssDest !== false && fontsOptions.cssDest.substr(-1) !== '/') fontsOptions.cssDest += '/';
   if (fontsOptions.scssDest !== false && fontsOptions.scssDest.substr(-1) !== '/') fontsOptions.scssDest += '/';
 
@@ -110,7 +112,7 @@ function loader (content, map, meta) {
   if (fontsOptions.inputPath !== false) {
     /* Emit fonts files
     ============================================================================= */
-    const fontsDetail = utils.emitFonts(this, fonts.filesFound, fontsOptions.inputPath, fontsOptions.outputPath, fontsOptions.fontFilename);
+    const fontsDetail = utils.emitFonts(this, fonts.filesFound, fontsOptions.inputPath, fontsOptions.outputPath, fontsOptions.publicPath, fontsOptions.fontFilename);
 
     /* Generate the fontfaces CSS and SCSS
     ============================================================================= */

diff --git a/src/utils.js b/src/utils.js
@@ -112,7 +112,7 @@ function getContext (loader) {
 
 /* Emit the fonts into the Webpack output destination
 ============================================================================= */
-function emitFonts (loader, fonts, inputPath, outputPath, filename) {
+function emitFonts (loader, fonts, inputPath, outputPath, publicPath, filename) {
   const fontsDetail = {};
   fonts.forEach((file) => {
     // Generate font metadata
@@ -129,7 +129,7 @@ function emitFonts (loader, fonts, inputPath, outputPath, filename) {
       fontExt
     );
     const fontURI = outputPath.concat(fontPath).concat(fontFilename);
-    const fontURL = ('/').concat(fontURI.replace(/\\/g, '/'));
+    const fontURL = publicPath.concat(fontURI.replace(/\\/g, '/'));
     // Aggregate font metadata
     fontsDetail[fontName] = fontsDetail[fontName] || { name: '', types: [], urls: [] };
     fontsDetail[fontName].name = fontName;

diff --git a/tests/multifonts.loader.js b/tests/multifonts.loader.js
@@ -13,6 +13,7 @@ module.exports = {
     ],
     inputPath: path.resolve(__dirname, 'assets/fonts'),
     outputPath: 'fonts',
+    publicPath: '/',
     fontFilename: '[fontname].[chunkhash].[ext]?[hash]',
     cssDest: path.resolve(__dirname, 'styles/fonts'),
     cssFilename: 'fonts',