diff --git a/lib/plugin.js b/lib/plugin.js
index 421056b..2fe21a3 100644
--- a/lib/plugin.js
+++ b/lib/plugin.js
@@ -59,14 +59,14 @@ class SVGSpritePlugin {
loaderContext[NAMESPACE] = plugin;
});
- // Replace placeholders with real URL to symbol (in modules processed by sprite-loader)
+ // Replace placeholders with real URL to symbol (in modules processed by svg-sprite-loader)
compilation.plugin('after-optimize-chunks', function replacePlaceholdersInModules() {
const map = new MappedList(symbols, this);
const replacements = map.groupItemsBySymbolFile((acc, item) => acc[item.resource] = item.useUrl);
map.items.forEach(item => replaceInModuleSource(item.module, replacements));
});
- // Hook into extract-text-webpack-plugin event to replace placeholders with real URL to symbol
+ // Hook into extract-text-webpack-plugin to replace placeholders with real URL to symbol
compilation.plugin('optimize-extracted-chunks', function replacePlaceholdersInExtractedChunks(chunks) {
const map = new MappedList(symbols, this);
const replacements = map.groupItemsBySymbolFile((acc, item) => acc[item.resource] = item.useUrl);
@@ -82,7 +82,21 @@ class SVGSpritePlugin {
});
});
- // Hook into html-webpack-plugin event to replace placeholders with real URL to symbol
+ // Hook into html-webpack-plugin to add `sprites` variable into template context
+ compilation.plugin('html-webpack-plugin-before-html-generation', function htmlPluginHook(htmlPluginData, done) {
+ const { assets } = this;
+ const map = new MappedList(symbols, this);
+ const itemsBySprite = map.groupItemsBySpriteFilename();
+ const sprites = Object.keys(itemsBySprite).reduce((acc, filename) => {
+ acc[filename] = assets[filename].source();
+ return acc;
+ }, {});
+
+ htmlPluginData.assets.sprites = sprites;
+ done(null, htmlPluginData);
+ });
+
+ // Hook into html-webpack-plugin to replace placeholders with real URL to symbol
compilation.plugin('html-webpack-plugin-before-html-processing', function htmlPluginHook(htmlPluginData, done) {
const map = new MappedList(symbols, this);
const replacements = map.groupItemsBySymbolFile((acc, item) => acc[item.resource] = item.useUrl);
diff --git a/test/fixtures/html-webpack-plugin/template.ejs b/test/fixtures/html-webpack-plugin/template.ejs
new file mode 100644
index 0000000..7d750fa
--- /dev/null
+++ b/test/fixtures/html-webpack-plugin/template.ejs
@@ -0,0 +1,16 @@
+
+
+
+
+ <%= htmlWebpackPlugin.options.title %>
+
+
+<% if (htmlWebpackPlugin.files.sprites) { %>
+ <% for (var spriteFileName in htmlWebpackPlugin.files.sprites) { %>
+ <%= htmlWebpackPlugin.files.sprites[spriteFileName] %>
+ <% } %>
+<% } %>
+
+
+
+
diff --git a/test/fixtures/html-webpack-plugin/template.html b/test/fixtures/html-webpack-plugin/template.html
deleted file mode 100644
index 4694cfc..0000000
--- a/test/fixtures/html-webpack-plugin/template.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-
- <%= htmlWebpackPlugin.options.title %>
-
-
-
-
-
diff --git a/test/loader.test.js b/test/loader.test.js
index f48c784..7ca5ab4 100644
--- a/test/loader.test.js
+++ b/test/loader.test.js
@@ -258,7 +258,7 @@ describe('loader and plugin', () => {
module: rules(
svgRule({ extract: true }),
rule({
- test: /\.html$/,
+ test: /template\.ejs$/,
loader: 'html-loader'
})
),
@@ -266,7 +266,7 @@ describe('loader and plugin', () => {
new SpritePlugin(),
new HtmlPlugin({
filename: 'index.html',
- template: path.resolve(fixturesPath, 'html-webpack-plugin/template.html')
+ template: path.resolve(fixturesPath, 'html-webpack-plugin/template.ejs')
})
]
});