Corrected the logo problem by adding it to the static files (#708)

client/index.jsx

@@ -8,6 +8,9 @@ import routes from './routes';
 
 require('./styles/main.scss');
 
+// Load the p5 png logo, so that webpack will use it
+require('./images/p5js-square-logo.png');
+
 const history = browserHistory;
 const initialState = window.__INITIAL_STATE__;
 const store = configureStore(initialState);

package.json

@@ -45,7 +45,7 @@
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
     "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^0.8.5",
+    "file-loader": "^2.0.0",
     "node-sass": "^4.9.0",
     "nodemon": "^1.9.2",
     "postcss-cssnext": "^2.7.0",

webpack/config.dev.js

@@ -67,21 +67,33 @@ module.exports = [{
       },
       {
         test: /main\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader']
+        use: ['style-loader', 'css-loader', 'sass-loader']
       },
       {
         test: /\.(svg|mp3)$/,
-        loader: 'file-loader'
+        use: 'file-loader'
+      },
+      {
+        test: /\.(png)$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+            outputPath: 'images/'
+          }
+         }
       },
       {
         test: /fonts\/.*\.(eot|svg|ttf|woff|woff2)$/,
-        loader: 'file-loader'
+        use: 'file-loader'
       },
       {
         test: /_console-feed.scss/,
-        loader: 'sass-extract-loader',
+        use: {
-        options: {
+          loader: 'sass-extract-loader',
-          plugins: [{ plugin: 'sass-extract-js', options: { camelCase: false } }]
+          options: {
+            plugins: [{ plugin: 'sass-extract-js', options: { camelCase: false } }]
+          }
         }
       }
     ],

webpack/config.prod.js

@@ -54,7 +54,7 @@ module.exports = [{
   },
 
   module: {
-    loaders: [
+    rules: [
       {
         test: /main\.scss$/,
         exclude: /node_modules/,
@@ -66,21 +66,33 @@ module.exports = [{
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
-        loader: 'babel-loader'
+        use: 'babel-loader'
       },
       {
         test: /\.(svg|mp3)$/,
-        loader: 'file-loader'
+        use: 'file-loader'
+      },
+      {
+        test: /\.(png)$/,
+        use: {
+            loader: 'file-loader',
+            options: {
+                name: '[name].[ext]',
+                outputPath: 'images/'
+            }
+        }
       },
       {
         test: /fonts\/.*\.(eot|svg|ttf|woff|woff2)$/,
-        loader: 'file-loader'
+        use: 'file-loader'
       },
       {
         test: /_console-feed.scss/,
-        loader: 'sass-extract-loader',
+        use: {
-        options: {
+          loader: 'sass-extract-loader',
-          plugins: [{ plugin: 'sass-extract-js', options: { camelCase: false } }]
+          options: {
+            plugins: [{ plugin: 'sass-extract-js', options: { camelCase: false } }]
+          }
         }
       }
     ]