fix(webpack): don't overwrite css files when outputting webpack files

don't overwrite css files when outputting webpack files

Author: danbucholtz

src/webpack.spec.ts

@@ -0,0 +1,70 @@
+import { join } from 'path';
+
+import * as webpack from './webpack';
+import { FileCache } from './util/file-cache';
+import * as helpers from './util/helpers';
+
+describe('Webpack Task', () => {
+  describe('writeBundleFilesToDisk', () => {
+    it('should write all build artifacts to disk except css', () => {
+      const appDir = join('some', 'fake', 'dir', 'myApp');
+      const buildDir = join(appDir, 'www', 'build');
+
+      const context = {
+        fileCache: new FileCache(),
+        buildDir: buildDir
+      };
+
+      const fileOnePath = join(buildDir, 'main.js');
+      const fileTwoPath = join(buildDir, 'main.js.map');
+      const fileThreePath = join(buildDir, '0.main.js');
+      const fileFourPath = join(buildDir, '0.main.js.map');
+      const fileFivePath = join(buildDir, '1.main.js');
+      const fileSixPath = join(buildDir, '1.main.js.map');
+      const fileSevenPath = join(appDir, 'pages', 'page-one.ts');
+      const fileEightPath = join(appDir, 'pages', 'page-one.js');
+      const fileNinePath = join(buildDir, 'main.css');
+      const fileTenPath = join(buildDir, 'main.css.map');
+      const fileElevenPath = join(buildDir, 'secondary.css');
+      const fileTwelvePath = join(buildDir, 'secondary.css.map');
+
+      context.fileCache.set(fileOnePath, { path: fileOnePath, content: fileOnePath + 'content'});
+      context.fileCache.set(fileTwoPath, { path: fileTwoPath, content: fileTwoPath + 'content'});
+      context.fileCache.set(fileThreePath, { path: fileThreePath, content: fileThreePath + 'content'});
+      context.fileCache.set(fileFourPath, { path: fileFourPath, content: fileFourPath + 'content'});
+      context.fileCache.set(fileFivePath, { path: fileFivePath, content: fileFivePath + 'content'});
+      context.fileCache.set(fileSixPath, { path: fileSixPath, content: fileSixPath + 'content'});
+      context.fileCache.set(fileSevenPath, { path: fileSevenPath, content: fileSevenPath + 'content'});
+      context.fileCache.set(fileEightPath, { path: fileEightPath, content: fileEightPath + 'content'});
+      context.fileCache.set(fileNinePath, { path: fileNinePath, content: fileNinePath + 'content'});
+      context.fileCache.set(fileTenPath, { path: fileTenPath, content: fileTenPath + 'content'});
+      context.fileCache.set(fileElevenPath, { path: fileElevenPath, content: fileElevenPath + 'content'});
+      context.fileCache.set(fileTwelvePath, { path: fileTwelvePath, content: fileTwelvePath + 'content'});
+
+      const writeFileSpy = spyOn(helpers, helpers.writeFileAsync.name).and.returnValue(Promise.resolve());
+
+      const promise = webpack.writeBundleFilesToDisk(context);
+
+      return promise.then(() => {
+        expect(writeFileSpy).toHaveBeenCalledTimes(6);
+        expect(writeFileSpy.calls.all()[0].args[0]).toEqual(fileOnePath);
+        expect(writeFileSpy.calls.all()[0].args[1]).toEqual(fileOnePath + 'content');
+
+        expect(writeFileSpy.calls.all()[1].args[0]).toEqual(fileTwoPath);
+        expect(writeFileSpy.calls.all()[1].args[1]).toEqual(fileTwoPath + 'content');
+
+        expect(writeFileSpy.calls.all()[2].args[0]).toEqual(fileThreePath);
+        expect(writeFileSpy.calls.all()[2].args[1]).toEqual(fileThreePath + 'content');
+
+        expect(writeFileSpy.calls.all()[3].args[0]).toEqual(fileFourPath);
+        expect(writeFileSpy.calls.all()[3].args[1]).toEqual(fileFourPath + 'content');
+
+        expect(writeFileSpy.calls.all()[4].args[0]).toEqual(fileFivePath);
+        expect(writeFileSpy.calls.all()[4].args[1]).toEqual(fileFivePath + 'content');
+
+        expect(writeFileSpy.calls.all()[5].args[0]).toEqual(fileSixPath);
+        expect(writeFileSpy.calls.all()[5].args[1]).toEqual(fileSixPath + 'content');
+      });
+    });
+  });
+});

src/webpack.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from 'events';
-import { join } from 'path';
+import { dirname, extname, join } from 'path';
 
 import * as webpackApi from 'webpack';
 
@@ -95,7 +95,7 @@ function webpackBuildComplete(stats: any, context: BuildContext, webpackConfig:
 
   // set the module files used in this bundle
   // this reference can be used elsewhere in the build (sass)
-  const files = stats.compilation.modules.map((webpackObj: any) => {
+  const files: string[] = stats.compilation.modules.map((webpackObj: any) => {
     if (webpackObj.resource) {
       return webpackObj.resource;
     } else {
@@ -112,8 +112,10 @@ function webpackBuildComplete(stats: any, context: BuildContext, webpackConfig:
 }
 
 export function writeBundleFilesToDisk(context: BuildContext) {
-  const buildFiles = context.fileCache.getAll().filter(file => file.path.indexOf(context.buildDir) >= 0);
-  const promises = buildFiles.map(buildFile => writeFileAsync(buildFile.path, buildFile.content));
+  const bundledFilesToWrite = context.fileCache.getAll().filter(file => {
+    return dirname(file.path) === context.buildDir && (file.path.endsWith('.js') || file.path.endsWith('.js.map'));
+  });
+  const promises = bundledFilesToWrite.map(bundledFileToWrite => writeFileAsync(bundledFileToWrite.path, bundledFileToWrite.content));
   return Promise.all(promises);
 }