feat(loader): webpack 3 module concatenation interop in extract mode

ISSUES CLOSED: #146

Author: kisenka

lib/utils/get-all-modules.js

@@ -1,16 +1,34 @@
+let ConcatenatedModule;
+try {
+  // eslint-disable-next-line global-require,import/no-unresolved,import/no-extraneous-dependencies
+  ConcatenatedModule = require('webpack/lib/optimize/ConcatenatedModule');
+  // eslint-disable-next-line no-empty
+} catch (e) {}
+
 /**
- * Get all modules main & child compilations.
+ * Get all modules from main & child compilations.
+ * Merge modules from ConcatenatedModule (when webpack.optimize.ModuleConcatenationPlugin is used)
  * @param {Compilation} compilation
  * @return {NormalModule[]}
  */
 function getAllModules(compilation) {
   let modules = compilation.modules;
 
-  // Search in child compilations
+  // Look up in child compilations
   if (compilation.children.length > 0) {
-    modules = compilation.children.reduce((acc, childCompilation) => {
-      return acc.concat(childCompilation.modules);
-    }, modules);
+    const childModules = compilation.children.map(getAllModules)
+      .reduce((acc, compilationModules) => acc.concat(compilationModules), []);
+
+    modules = modules.concat(childModules);
+  }
+
+  // Merge modules from ConcatenatedModule
+  if (ConcatenatedModule) {
+    const concatenatedModules = modules
+      .filter(m => m instanceof ConcatenatedModule)
+      .reduce((acc, m) => acc.concat(m.modules), []);
+
+    modules = modules.concat(concatenatedModules);
   }
 
   return modules;

test/fixtures/entry-es6-import.js

@@ -0,0 +1 @@
+import './img/image.svg';

test/loader.test.js

@@ -3,6 +3,7 @@ const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
 const HtmlPlugin = require('html-webpack-plugin');
 
 const { isWebpack1 } = require('../lib/utils');
+const webpackVersion = require('../lib/utils/get-webpack-version');
 const { loaderPath, fixturesPath } = require('./_config');
 const {
   rule,
@@ -274,6 +275,36 @@ describe('loader and plugin', () => {
       });
     });
 
+    // webpack 3 scope hoisting interop
+    if (webpackVersion.IS_3) {
+      // eslint-disable-next-line global-require
+      const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
+
+      describe('webpack ModuleConcatenationPlugin interop', () => {
+        it('should work', async () => {
+          const spriteFilename = 'qwe.svg';
+          const { assets } = await compile({
+            entry: './entry-es6-import',
+            module: rules(
+              svgRule({ extract: true, spriteFilename })
+            ),
+            plugins: [
+              new SpritePlugin(),
+              new ModuleConcatenationPlugin()
+            ]
+          });
+
+          Object.keys(assets).should.be.lengthOf(2);
+          assets.should.have.property(spriteFilename);
+        });
+
+        // TODO
+        it('should properly interpolate [chunkname]', () => {
+
+        });
+      });
+    }
+
     it('should automatically detect modules to extract', async () => {
       const { assets } = await compile({
         entry: './entry',