Extract font creation as prebuild from webpack build

config/build-fonts.js

@@ -0,0 +1,48 @@
+const webfont = require("webfont").default;
+const fs = require("fs");
+const path = require("path");
+
+webfontConfig = {
+  files: 'src/icons/*.svg',
+  dest: 'src/styles/font/',
+  formats: ['ttf', 'eot', 'woff', 'woff2'],
+  fontName: 'summernote',
+  template: 'src/icons/templates/summernote-icons.css',
+  destTemplate: 'src/styles/summernote-icons.css',
+  templateFontName: 'summernote',
+  templateClassName: 'note-icon',
+  templateFontPath: './font/',
+  fixedWidth: false,
+  normalize: true,
+};
+
+console.log('Building fonts...');
+
+webfont(webfontConfig)
+.then(result => {
+  Object.keys(result).map(type => {
+    if (
+      type === "config" ||
+      type === "usedBuildInTemplate" ||
+      type === "glyphsData"
+    ) {
+      return;
+    }
+
+    const content = result[type];
+    let file = null;
+
+    if (type !== "template") {
+      file = path.resolve(path.join(webfontConfig['dest'], webfontConfig['fontName'] + '.' + type));
+    } else {
+      file = path.resolve(webfontConfig['destTemplate']);
+    }
+    console.log("Writing ", file);
+
+    fs.writeFileSync(file, content);
+  })
+})
+.catch(error => {
+  console.log(error);
+  throw error;
+});

config/common/dev.common.config.js

@@ -1,8 +1,6 @@
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const WebfontPlugin = require('webfont-webpack-plugin').default;
 const CopyPlugin = require('copy-webpack-plugin');
-const webfontConfig = require('./webfont.config');
 const scssConfig = require('./scss.config');
 const path = require('path');
 const fs = require('fs');
@@ -100,7 +98,6 @@ module.exports = function() {
       ],
     },
     plugins: [
-      new WebfontPlugin(webfontConfig),
       new MiniCssExtractPlugin({
         filename: '[name].css',
       }),

config/common/production.common.config.js

@@ -3,9 +3,7 @@ const path = require('path');
 
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const WebfontPlugin = require('webfont-webpack-plugin').default;
 const CopyPlugin = require('copy-webpack-plugin');
-const webfontConfig = require('./webfont.config');
 const scssConfig = require('./scss.config');
 const CleanPlugin = require('clean-webpack-plugin');
 const ZipPlugin = require('zip-webpack-plugin');
@@ -157,7 +155,6 @@ module.exports = function() {
           return basename.includes('min') ? minBanner : banner;
         },
       }),
-      new WebfontPlugin(webfontConfig),
       new MiniCssExtractPlugin({
         filename: `[name].css`,
       }),

package.json

@@ -18,8 +18,8 @@
   "main": "dist/summernote.js",
   "scripts": {
     "dev": "eslint config && webpack-dev-server --config=./config/webpack.config.dev.js --open --progress",
-    "icons": "webpack --config=./config/webpack.config.icons.js --progress ",
-    "build": "webpack --mode=production --config=./config/webpack.config.production.js --progress ",
+    "prebuild": "node ./config/build-fonts.js",
+    "build": "npm run prebuild && webpack --mode=production --config=./config/webpack.config.production.js --progress",
     "lint": "eslint src/js plugin lang test config",
     "test": "karma start karma.conf.js --single-run",
     "test:watch": "karma start karma.conf.js",

src/icons/templates/summernote-icons.css

@@ -32,10 +32,10 @@
   {%- endif -%}
 }
 
-[class^="{{ className }}"]:before,  
+[class^="{{ className }}"]:before,
 [class*=" {{ className }}"]:before {
   display: inline-block;
-  font: normal normal normal 11px/1 {{ fontName }};  
+  font: normal normal normal 11px/1 {{ fontName }};
   text-rendering: auto;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;

src/styles/summernote-icons.css

@@ -6,10 +6,10 @@
   src: url("./font/summernote.eot");
   src: url("./font/summernote.eot?#iefix") format("embedded-opentype"), url("./font/summernote.woff2") format("woff2"), url("./font/summernote.woff") format("woff"), url("./font/summernote.ttf") format("truetype");}
 
-[class^="note-icon"]:before,  
+[class^="note-icon"]:before,
 [class*=" note-icon"]:before {
   display: inline-block;
-  font: normal normal normal 11px/1 summernote;  
+  font: normal normal normal 11px/1 summernote;
   text-rendering: auto;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;