diff --git a/webpack/plugins/svg-prep.js b/webpack/plugins/svg-prep.js index a9399eb384..ab7caaf20f 100644 --- a/webpack/plugins/svg-prep.js +++ b/webpack/plugins/svg-prep.js @@ -10,6 +10,8 @@ const fs = require('fs'); const path = require('path'); const SvgPrep = require('svg-prep'); +const { Compilation, sources } = require('webpack'); +const { RawSource } = sources; function SvgPrepPlugin(options) { this.options = {}; @@ -23,28 +25,28 @@ function SvgPrepPlugin(options) { } SvgPrepPlugin.prototype.apply = function(compiler) { - compiler.hooks.emit.tapAsync('SvgPrepPlugin', (compilation, callback) => { - if (!this.options.source) { - return callback(); - } + compiler.hooks.thisCompilation.tap(SvgPrepPlugin.name, (compilation) => { + compilation.hooks.processAssets.tapPromise( + { + name: SvgPrepPlugin.name, + stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL, + }, + async () => { + if (!this.options.source) { + return Promise.resolve(); + } - // TODO: Keep track of file hashes, so we can avoid recompiling when none have changed - let files = fs.readdirSync(this.options.source).filter((name) => { - return !!name.match(/\.svg$/); - }).map((name) => path.join(this.options.source, name)); - SvgPrep(files) - .filter({ removeIds: true, noFill: true }) - .output().then((sprited) => { - compilation.assets[this.options.output] = { - source: function() { - return sprited; - }, - size: function() { - return sprited.length; - } - }; + // TODO: Keep track of file hashes, so we can avoid recompiling when none have changed + let files = fs + .readdirSync(this.options.source) + .filter((name) => name.endsWith('.svg')) + .map((name) => path.join(this.options.source, name)); - callback(); + const sprited = await SvgPrep(files) + .filter({ removeIds: true, noFill: true }) + .output(); + + compilation.emitAsset(this.options.output, new RawSource(sprited)); }); }); }