Merge branch 'outputPath' of https://github.com/Slashgear/svg-sprite-…

…loader into Slashgear-outputPath
JetBrains · May 3, 2020 · 1fa7964 · 1fa7964
2 parents 2982066 + 4451995
commit 1fa7964
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -26,6 +26,7 @@ Webpack loader for creating SVG sprites.
     - [`extract`](#extract)
     - [`spriteFilename`](#sprite-filename)
     - [`publicPath`](#public-path)
+    - [`outputPath`](#output-path)
     - [`plainSprite`](#plain-sprite)
     - [`spriteAttrs`](#sprite-attrs)
 - [Examples](#examples)
@@ -241,6 +242,25 @@ Custom public path for sprite file.
 }
 ```
 
+<a id="output-path"></a>
+### `outputPath` (type: `string`, default: null`)
+
+Custom output path for sprite file.
+By default it will use `publicPath`.
+This param is useful if you want to store sprite is a directory with a custom http access.
+
+```js
+{
+  test: /\.svg$/,
+  loader: 'svg-sprite-loader',
+  options: {
+    extract: true,
+    outputPath: 'custom-dir/sprites/'
+    publicPath: 'sprites/'
+  }
+}
+```
+
 <a id="plain-sprite"></a>
 ### Plain sprite
 

diff --git a/lib/plugin.js b/lib/plugin.js
@@ -60,6 +60,11 @@ class SVGSpritePlugin {
   apply(compiler) {
     this.rules = getMatchedRule(compiler);
 
+    const path = this.rules.outputPath ? this.rules.outputPath : this.rules.publicPath;
+    this.filenamePrefix = path
+      ? path.replace(/^\//, '')
+      : '';
+
     if (compiler.hooks) {
       compiler.hooks
         .thisCompilation
@@ -159,11 +164,8 @@ class SVGSpritePlugin {
       })
         .then((sprite) => {
           const content = sprite.render();
-          const filenamePrefix = this.rules.publicPath
-            ? this.rules.publicPath.replace(/^\//, '')
-            : '';
 
-          compilation.assets[`${filenamePrefix}${filename}`] = {
+          compilation.assets[`${this.filenamePrefix}${filename}`] = {
             source() { return content; },
             size() { return content.length; }
           };
@@ -200,11 +202,9 @@ class SVGSpritePlugin {
 
   beforeHtmlGeneration(compilation) {
     const itemsBySprite = this.map.groupItemsBySpriteFilename();
-    const filenamePrefix = this.rules.publicPath
-            ? this.rules.publicPath.replace(/^\//, '')
-            : '';
+
     const sprites = Object.keys(itemsBySprite).reduce((acc, filename) => {
-      acc[filenamePrefix + filename] = compilation.assets[filenamePrefix + filename].source();
+      acc[this.filenamePrefix + filename] = compilation.assets[this.filenamePrefix + filename].source();
       return acc;
     }, {});
 

diff --git a/test/loader.test.js b/test/loader.test.js
@@ -446,6 +446,28 @@ describe('loader and plugin', () => {
       assets['main.js'].source().should.contain(`__webpack_require__.p + "${spriteFilename}`);
     });
 
+    it('should generate asset with output path without changing publicPath', async () => {
+      const publicPath = '/olala/';
+      const spriteFilename = defaultSpriteFilename;
+
+      const v4Config = {};
+      if (webpackVersion.IS_4) {
+        v4Config.mode = 'development';
+        v4Config.devtool = false;
+      }
+
+      const { assets } = await compile(Object.assign(v4Config, {
+        entry: './entry',
+        output: { publicPath },
+        module: rules(
+          svgRule({ extract: true, spriteFilename, outputPath: '/foo/' })
+        ),
+        plugins: [new SpritePlugin()]
+      }));
+
+      assets['main.js'].source().should.contain(`__webpack_require__.p + "${spriteFilename}`);
+    });
+
     it('should emit only built chunks', () => {
       // TODO test with webpack-recompilation-emulator
     });