diff --git a/packages/core/package.json b/packages/core/package.json index d759c4d1e..25988c0a4 100644 --- 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 index d7061d00f..30bea70f3 100644 --- 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 index cd3c9af68..01fc4eab7 100644 --- 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" + } + } } ] };