feat(webpack-client): use svg-url-loader for svg

alfa-laboratory · Nov 9, 2020 · 638d601 · 638d601
1 parent 1bf0be1
commit 638d601
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 2 deletions.
diff --git a/.pnp.js b/.pnp.js
diff --git a/packages/arui-scripts/package.json b/packages/arui-scripts/package.json
@@ -83,6 +83,7 @@
         "start-server-webpack-plugin": "^2.2.1",
         "strip-ansi": "^6.0.0",
         "style-loader": "1.1.3",
+        "svg-url-loader": "^6.0.0",
         "tar": "4.4.8",
         "terser-webpack-plugin": "1.4.5",
         "ts-jest": "25.5.1",

diff --git a/packages/arui-scripts/src/configs/webpack.client.dev.ts b/packages/arui-scripts/src/configs/webpack.client.dev.ts
@@ -97,11 +97,20 @@ const webpackClientDev = applyOverrides<webpack.Configuration>(['webpack', 'webp
                 // match the requirements. When no loader matches it will fall
                 // back to the "file" loader at the end of the loader list.
                 oneOf: ([
+                    {
+                        test: [/\.svg$/],
+                        loader: require.resolve('svg-url-loader'),
+                        options: {
+                            limit: 10000,
+                            iesafe: true,
+                            name: '[name].[hash:8].[ext]',
+                        },
+                    },
                     // "url" loader works like "file" loader except that it embeds assets
                     // smaller than specified limit in bytes as data URLs to avoid requests.
                     // A missing `test` is equivalent to a match.
                     {
-                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
+                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                         loader: require.resolve('url-loader'),
                         options: {
                             limit: 10000,

diff --git a/packages/arui-scripts/src/configs/webpack.client.prod.ts b/packages/arui-scripts/src/configs/webpack.client.prod.ts
@@ -152,11 +152,20 @@ const config  = applyOverrides<webpack.Configuration>(['webpack', 'webpackClient
                 // match the requirements. When no loader matches it will fall
                 // back to the "file" loader at the end of the loader list.
                 oneOf: ([
+                    {
+                        test: [/\.svg$/],
+                        loader: require.resolve('svg-url-loader'),
+                        options: {
+                            limit: 10000,
+                            iesafe: true,
+                            name: '[name].[hash:8].[ext]',
+                        },
+                    },
                     // "url" loader works like "file" loader except that it embeds assets
                     // smaller than specified limit in bytes as data URLs to avoid requests.
                     // A missing `test` is equivalent to a match.
                     {
-                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
+                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                         loader: require.resolve('url-loader'),
                         options: {
                             limit: 10000,

diff --git a/yarn.lock b/yarn.lock
@@ -3475,6 +3475,7 @@ __metadata:
     start-server-webpack-plugin: ^2.2.1
     strip-ansi: ^6.0.0
     style-loader: 1.1.3
+    svg-url-loader: ^6.0.0
     tar: 4.4.8
     terser-webpack-plugin: 1.4.5
     ts-jest: 25.5.1
@@ -7102,6 +7103,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"file-loader@npm:~6.0.0":
+  version: 6.0.0
+  resolution: "file-loader@npm:6.0.0"
+  dependencies:
+    loader-utils: ^2.0.0
+    schema-utils: ^2.6.5
+  peerDependencies:
+    webpack: ^4.0.0 || ^5.0.0
+  checksum: 745f5ee763fe46f2124921ff4fb7ed601eb1e8d6ac975cf6af321b3957ce8f78afb885c636e64a9031634e85e26dc9e8ef40ebeb532153c6a80a7d06b56876cb
+  languageName: node
+  linkType: hard
+
 "file-uri-to-path@npm:1.0.0":
   version: 1.0.0
   resolution: "file-uri-to-path@npm:1.0.0"
@@ -10044,6 +10057,17 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"loader-utils@npm:^2.0.0, loader-utils@npm:~2.0.0":
+  version: 2.0.0
+  resolution: "loader-utils@npm:2.0.0"
+  dependencies:
+    big.js: ^5.2.2
+    emojis-list: ^3.0.0
+    json5: ^2.1.2
+  checksum: a1c2e48781e1501e126a32c39bc1fb1a7e2f02bd99e5aeb8853ddaf3c121fffefcc4579367f97ca6890b58369e571af1c9ec82e4e20db238d560ab359ff25c33
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^2.0.0":
   version: 2.0.0
   resolution: "locate-path@npm:2.0.0"
@@ -14867,6 +14891,18 @@ resolve@1.1.7:
   languageName: node
   linkType: hard
 
+"svg-url-loader@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "svg-url-loader@npm:6.0.0"
+  dependencies:
+    file-loader: ~6.0.0
+    loader-utils: ~2.0.0
+  peerDependencies:
+    webpack: ^4.0.0 || ^5.0.0
+  checksum: d783933fab8f9dabe6d05dd46a1cc81f5443442297c7db09406c88048254b71c92f27bbe80ce4655c5247c9df05a5c19faee83276cacd838db2160827756a5e5
+  languageName: node
+  linkType: hard
+
 "svgo@npm:^1.0.0":
   version: 1.3.2
   resolution: "svgo@npm:1.3.2"