Fix webpack generation of names for images

see
webpack/webpack#4742

app/codebusters/cipherpigpenencoder.ts

@@ -221,30 +221,30 @@ export class CipherPigPenEncoder extends CipherEncoder {
         result.append(
             $('<p/>').text(
                 'First you want to create the lookup table ' +
-                    'by drawing two tic-tac-toe boards followed by two big Xs. '
+                'by drawing two tic-tac-toe boards followed by two big Xs. '
             )
         );
-        result.append($('<img/>', { src: pigpen1 }));
+        result.append($('<img/>', { src: pigpen1.default }));
         result.append(
             $('<p/>').text(
                 'Then write the alphabet in the tic-tac-toe ' +
-                    'boards across and then down ' +
-                    'putting dots on the letters in the second board.'
+                'boards across and then down ' +
+                'putting dots on the letters in the second board.'
             )
         );
         result.append(
             $('<p/>').text(
                 'Then fill up the two big Xs starting ' +
-                    'at the top then left, right and finally bottom, putting dots on the letters in the ' +
-                    'second X. like:'
+                'at the top then left, right and finally bottom, putting dots on the letters in the ' +
+                'second X. like:'
             )
         );
-        result.append($('<img/>', { src: pigpen2 }));
+        result.append($('<img/>', { src: pigpen2.default }));
         result.append(
             $('<p/>').text(
                 'With that decode table, it should be quick ' +
-                    'decode the characters by looking at the shapes and whether ' +
-                    'the shape has a dot in it or not.'
+                'decode the characters by looking at the shapes and whether ' +
+                'the shape has a dot in it or not.'
             )
         );
         return result;

app/codebusters/ciphertapcodeencoder.ts

@@ -121,7 +121,7 @@ export class CipherTapCodeEncoder extends CipherEncoder {
      * Fills in the frequency portion of the frequency table.  For the Ragbaby
      * we don't have the frequency table, so this doesn't need to do anything
      */
-    public displayFreq(): void {}
+    public displayFreq(): void { }
     /**
      * Generate the HTML to display the question for a cipher
      */
@@ -284,25 +284,25 @@ export class CipherTapCodeEncoder extends CipherEncoder {
         result.append(
             $('<p/>').text(
                 'First you want to create the lookup table ' +
-                    'by drawing a grid with 5 horizontal and 5 vertical lines. ' +
-                    'Then fill in the top with the numbers 1 through 5 and the same on the ' +
-                    'left side of the grid.  Finally fill in the letters from left to right ' +
-                    'and then down, remembering to skip the letter K. ' +
-                    'Once you have filled in all 25 cells, go back and add K to the cell ' +
-                    'with C in it giving you a table like:'
+                'by drawing a grid with 5 horizontal and 5 vertical lines. ' +
+                'Then fill in the top with the numbers 1 through 5 and the same on the ' +
+                'left side of the grid.  Finally fill in the letters from left to right ' +
+                'and then down, remembering to skip the letter K. ' +
+                'Once you have filled in all 25 cells, go back and add K to the cell ' +
+                'with C in it giving you a table like:'
             )
         );
-        result.append($('<img/>', { src: tapcode }));
+        result.append($('<img/>', { src: tapcode.default }));
         result.append(
             $('<p/>').text(
                 'Then go through the cipher text and put ' +
-                    'a mark between each two groups of dots. ' +
-                    'To decode, count the number of dots in the first group to pick the ' +
-                    'row in the table and the number of dots in the second group to pick ' +
-                    'the column and read the letter. ' +
-                    'Only when you have a single dot followed by three dots ' +
-                    '(which corresponds to the letter C) do you have to decide whether the ' +
-                    'letter should be a C or K'
+                'a mark between each two groups of dots. ' +
+                'To decode, count the number of dots in the first group to pick the ' +
+                'row in the table and the number of dots in the second group to pick ' +
+                'the column and read the letter. ' +
+                'Only when you have a single dot followed by three dots ' +
+                '(which corresponds to the letter C) do you have to decide whether the ' +
+                'letter should be a C or K'
             )
         );
         return result;

webpack.config.js

@@ -80,6 +80,7 @@ config = {
                     loader: 'url-loader',
                     options: {
                         limit: 8192,
+                        esModule: false
                     },
                 },
             },
@@ -91,6 +92,7 @@ config = {
                     loader: 'url-loader',
                     options: {
                         limit: 20000,
+                        esModule: false
                     },
                 },
             },