feat(webpack): add support for fonts to webpack

frontity · Oct 15, 2019 · 2148823 · 2148823
1 parent e56a7de
commit 2148823
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 5 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -71,6 +71,7 @@
     "require-from-string": "^2.0.2",
     "ts-node": "^8.0.3",
     "typescript": "^3.6.3",
+    "url-loader": "2.1.0",
     "webpack": "^4.29.6",
     "webpack-bundle-analyzer": "^3.1.0",
     "webpack-dev-middleware": "^3.6.0",

diff --git a/packages/core/src/config/webpack/__tests__/__snapshots__/index.ts.snap b/packages/core/src/config/webpack/__tests__/__snapshots__/index.ts.snap
@@ -55,6 +55,18 @@ Object {
           "test": /\\\\\\.css\\$/,
           "use": "raw-loader",
         },
+        Object {
+          "test": /\\\\\\.\\(woff\\(2\\)\\?\\|ttf\\|eot\\)\\(\\\\\\?v=\\\\d\\+\\\\\\.\\\\d\\+\\\\\\.\\\\d\\+\\)\\?\\$/,
+          "use": Object {
+            "loader": "url-loader",
+            "options": Object {
+              "emitFile": true,
+              "limit": 25000,
+              "name": [Function],
+              "outputPath": "fonts",
+            },
+          },
+        },
       ],
     },
     "name": "client",
@@ -177,6 +189,18 @@ Object {
           "test": /\\\\\\.css\\$/,
           "use": "raw-loader",
         },
+        Object {
+          "test": /\\\\\\.\\(woff\\(2\\)\\?\\|ttf\\|eot\\)\\(\\\\\\?v=\\\\d\\+\\\\\\.\\\\d\\+\\\\\\.\\\\d\\+\\)\\?\\$/,
+          "use": Object {
+            "loader": "url-loader",
+            "options": Object {
+              "emitFile": true,
+              "limit": 25000,
+              "name": [Function],
+              "outputPath": "fonts",
+            },
+          },
+        },
       ],
     },
     "name": "client",
@@ -287,6 +311,18 @@ Object {
           "test": /\\\\\\.css\\$/,
           "use": "raw-loader",
         },
+        Object {
+          "test": /\\\\\\.\\(woff\\(2\\)\\?\\|ttf\\|eot\\)\\(\\\\\\?v=\\\\d\\+\\\\\\.\\\\d\\+\\\\\\.\\\\d\\+\\)\\?\\$/,
+          "use": Object {
+            "loader": "url-loader",
+            "options": Object {
+              "emitFile": false,
+              "limit": 25000,
+              "name": [Function],
+              "outputPath": "fonts",
+            },
+          },
+        },
       ],
     },
     "name": "server",
@@ -402,6 +438,18 @@ Object {
           "test": /\\\\\\.css\\$/,
           "use": "raw-loader",
         },
+        Object {
+          "test": /\\\\\\.\\(woff\\(2\\)\\?\\|ttf\\|eot\\)\\(\\\\\\?v=\\\\d\\+\\\\\\.\\\\d\\+\\\\\\.\\\\d\\+\\)\\?\\$/,
+          "use": Object {
+            "loader": "url-loader",
+            "options": Object {
+              "emitFile": true,
+              "limit": 25000,
+              "name": [Function],
+              "outputPath": "fonts",
+            },
+          },
+        },
       ],
     },
     "name": "client",
@@ -516,6 +564,18 @@ Object {
           "test": /\\\\\\.css\\$/,
           "use": "raw-loader",
         },
+        Object {
+          "test": /\\\\\\.\\(woff\\(2\\)\\?\\|ttf\\|eot\\)\\(\\\\\\?v=\\\\d\\+\\\\\\.\\\\d\\+\\\\\\.\\\\d\\+\\)\\?\\$/,
+          "use": Object {
+            "loader": "url-loader",
+            "options": Object {
+              "emitFile": true,
+              "limit": 25000,
+              "name": [Function],
+              "outputPath": "fonts",
+            },
+          },
+        },
       ],
     },
     "name": "client",
@@ -620,6 +680,18 @@ Object {
           "test": /\\\\\\.css\\$/,
           "use": "raw-loader",
         },
+        Object {
+          "test": /\\\\\\.\\(woff\\(2\\)\\?\\|ttf\\|eot\\)\\(\\\\\\?v=\\\\d\\+\\\\\\.\\\\d\\+\\\\\\.\\\\d\\+\\)\\?\\$/,
+          "use": Object {
+            "loader": "url-loader",
+            "options": Object {
+              "emitFile": false,
+              "limit": 25000,
+              "name": [Function],
+              "outputPath": "fonts",
+            },
+          },
+        },
       ],
     },
     "name": "server",

diff --git a/packages/core/src/config/webpack/modules.ts b/packages/core/src/config/webpack/modules.ts
@@ -2,8 +2,7 @@ import hash from "hash-it";
 import { Configuration } from "webpack";
 import babelCore from "@babel/core/package.json";
 import babelLoader from "babel-loader/package.json";
-import { Target, BabelConfigs } from "../../../types";
-import { Mode } from "../../../types";
+import { Target, BabelConfigs, Mode } from "../../../types";
 
 export default ({
   target,
@@ -46,10 +45,10 @@ export default ({
           {
             loader: "file-loader",
             options: {
-              name(file) {
-                const filename = /([^\/\\]+)\.(?:png|jpe?g|gif|svg)$/.exec(
+              name: (file: string): string => {
+                const filename = /([^/\\]+)\.(?:png|jpe?g|gif|svg)$/.exec(
                   file
-                ) || [, "image"];
+                ) || ["", "image"];
                 return mode === "development"
                   ? `${filename[1]}.[ext]`
                   : `${filename[1]}-[hash].[ext]`;
@@ -63,6 +62,25 @@ export default ({
       {
         test: /\.css$/,
         use: "raw-loader"
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
+        use: {
+          loader: "url-loader",
+          options: {
+            name: (file: string): string => {
+              const filename = /([^/\\]+)\.(?:woff(2)?|ttf|eot)$/.exec(
+                file
+              ) || ["", "font"];
+              return mode === "development"
+                ? `${filename[1]}.[ext]`
+                : `${filename[1]}-[hash].[ext]`;
+            },
+            outputPath: "fonts",
+            limit: 25000,
+            emitFile: target !== "server"
+          }
+        }
       }
     ]
   };