From e42993683178dea7e77b94febb4dc2435ddb336f Mon Sep 17 00:00:00 2001 From: Pavel Mineev Date: Sun, 10 Jan 2021 18:59:07 +0300 Subject: [PATCH] replace file-loader with url-loader for inline svg to css --- frontend/package-lock.json | 24 ++++++++++++++++++++++++ frontend/package.json | 1 + frontend/webpack.config.js | 7 ++++--- 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ccbf3191..b5956e53 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15780,6 +15780,30 @@ } } }, + "url-loader": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz", + "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==", + "dev": true, + "requires": { + "loader-utils": "^2.0.0", + "mime-types": "^2.1.27", + "schema-utils": "^3.0.0" + }, + "dependencies": { + "schema-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", + "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.6", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + } + } + }, "url-parse": { "version": "1.4.7", "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz", diff --git a/frontend/package.json b/frontend/package.json index e12af59b..d441534c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -108,6 +108,7 @@ "ts-loader": "^8.0.14", "tsconfig-paths-webpack-plugin": "^3.3.0", "typescript": "^4.1.3", + "url-loader": "^4.1.1", "webpack": "^5.11.1", "webpack-bundle-analyzer": "^4.3.0", "webpack-cli": "^4.3.1", diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index 6440d6d3..32da97b1 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -159,19 +159,20 @@ module.exports = (_, { mode, analyze }) => { ], }; - const fileRule = { + const urlRule = { test: /\.(png|jpg|jpeg|gif|svg)$/, exclude: /node_modules/, use: { - loader: 'file-loader', + loader: 'url-loader', options: { name: '[name].[ext]', publicPath: PUBLIC_PATH, + limit: 1200, }, }, }; - const rules = [cssRule, cssModulesRule, fileRule]; + const rules = [cssRule, cssModulesRule, urlRule]; const devServer = { port: PORT,