fix(webpack): proper isomorphic assets loading

Author: somus

.babelrc

@@ -4,6 +4,28 @@
   "env": {
     "production": {
       "presets": ["es2015", "react", "react-optimize", "es2015-native-modules", "stage-0"]
+    },
+    "development": {
+      "plugins": [
+        [
+          "babel-plugin-webpack-loaders",
+          {
+            "config": "./webpack.config.babel.js",
+            "verbose": false
+          }
+        ]
+      ]
+    },
+    "test": {
+      "plugins": [
+        [
+          "babel-plugin-webpack-loaders",
+          {
+            "config": "${CONFIG}",
+            "verbose": false
+          }
+        ]
+      ]
     }
   }
 }

.eslintignore

@@ -1,5 +1,6 @@
 webpack.config.dev.js
 webpack.config.prod.js
 webpack.config.server.js
+webpack.config.babel.js
 index.js
 server/tests/

.eslintrc

@@ -22,13 +22,7 @@
      "no-underscore-dangle" : 0,
      "max-len": [1, 180, 4],
      "arrow-body-style": [0],
-     "react/jsx-no-bind": [0]
-  },
-  "settings": {
-    "import/resolver": {
-      "webpack": {
-        "config": "./webpack.config.dev.js"
-      }
-    }
+     "react/jsx-no-bind": [0],
+     "import/no-unresolved": [0] // Until import plugin supports webpack 2 resolveModules
   }
 }

client/modules/App/components/Footer/Footer.css

@@ -1,7 +1,6 @@
 .footer{
   text-align: center;
   padding: 56px 0;
-  background: #FFF url('header-bk.png') center;
   background-size: cover;
 }
 

client/modules/App/components/Footer/Footer.js

@@ -3,9 +3,12 @@ import React from 'react';
 // Import Style
 import styles from './Footer.css';
 
+// Import Images
+import bg from 'assets/header-bk.png';
+
 function Footer() {
   return (
-    <div className={styles.footer}>
+    <div style={{ background: `#FFF url(${bg}) center` }} className={styles.footer}>
       <p>&copy; 2016 &middot; Hashnode &middot; LinearBytes Inc.</p>
       <p>We are on Twitter : <a href="https://twitter.com/@mern_io" target="_Blank">@mern_io</a></p>
     </div>

client/modules/App/components/Header/Header.css

@@ -1,5 +1,5 @@
 .header {
-  background: #eee url('header-bk.png') center;
+  background: #eee url('assets/header-bk.png') center;
   background-size: cover;
   border-bottom: 1px solid #ccc;
 }

index.js

@@ -6,11 +6,6 @@ if (process.env.NODE_ENV === 'production') {
   // In production, serve the webpacked server file.
   require('./dist/server.bundle.js');
 } else {
-  // Ignore css and image files in babel
-  const noop = () => {
-  };
-  require.extensions['.css'] = noop();
-
   // Babel polyfill to convert ES6 code in runtime
   require('babel-register');
   require('babel-polyfill');

package.json

@@ -3,15 +3,15 @@
   "version": "1.0.0",
   "description": "Boilerplate project for building Isomorphic apps using React and Redux",
   "scripts": {
-    "test": "cross-env NODE_ENV=test PORT=8080 MONGO_URL=mongodb://localhost:27017/mern-test ava",
+    "test": "cross-env CONFIG=$(pwd)/webpack.config.babel.js BABEL_DISABLE_CACHE=1 NODE_ENV=test PORT=8080 MONGO_URL=mongodb://localhost:27017/mern-test ava",
     "watch:test": "npm run test -- --watch",
     "cover": "nyc npm run test",
     "check-coverage": "nyc check-coverage --statements 100 --branches 100 --functions 100 --lines 100",
-    "start": "cross-env NODE_ENV=development nodemon index.js",
+    "start": "cross-env BABEL_DISABLE_CACHE=1 NODE_ENV=development nodemon index.js",
     "start:prod": "cross-env NODE_ENV=production node index.js",
     "bs": "npm run clean && npm run build && npm run build:server && npm run start:prod",
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
-    "build:server": "webpack --config webpack.config.server.js",
+    "build:server": "cross-env NODE_ENV=production webpack --config webpack.config.server.js",
     "clean": "rimraf dist",
     "slate": "rimraf node_modules && npm install",
     "lint": "eslint client server"
@@ -54,6 +54,7 @@
     "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.4",
     "babel-plugin-css-modules-transform": "^0.1.1",
+    "babel-plugin-webpack-loaders": "^0.5.0",
     "babel-polyfill": "^6.9.1",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-es2015-native-modules": "^6.6.0",
@@ -70,12 +71,11 @@
     "enzyme": "^2.3.0",
     "eslint": "^2.11.1",
     "eslint-config-airbnb": "^9.0.1",
-    "eslint-import-resolver-webpack": "^0.3.0",
     "eslint-plugin-ava": "^2.4.0",
-    "eslint-plugin-import": "^1.8.1",
     "eslint-plugin-jsx-a11y": "^1.3.0",
     "eslint-plugin-react": "^5.1.1",
     "extract-text-webpack-plugin": "^1.0.1",
+    "fake-url-loader": "^1.0.1",
     "file-loader": "^0.8.5",
     "jsdom": "^9.2.1",
     "json-loader": "^0.5.4",

server/util/setup-test-env.js

@@ -1,6 +1,3 @@
-// Ignore webpack assets during testing
-require.extensions['.css'] = noop => noop;
-
 // CSS modules hook to inject css-modules classes in the final html.
 require('css-modules-require-hook')({
   generateScopedName: '[name]__[local]__[hash:base64:5]',

webpack.config.babel.js

@@ -0,0 +1,20 @@
+module.exports = {
+  output: {
+    libraryTarget: 'commonjs2',
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+    modules: [
+      'client',
+      'node_modules',
+    ],
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
+        loader: 'url-loader?limit=10000',
+      },
+    ],
+  },
+};

webpack.config.dev.js

@@ -28,9 +28,7 @@ module.exports = {
   resolve: {
     extensions: ['', '.js', '.jsx'],
     modules: [
-      'assets',
-      'components',
-      'modules',
+      'client',
       'node_modules',
     ],
   },

webpack.config.prod.js

@@ -30,9 +30,7 @@ module.exports = {
   resolve: {
     extensions: ['', '.js', '.jsx'],
     modules: [
-      'assets',
-      'components',
-      'modules',
+      'client',
       'node_modules',
     ],
   },

webpack.config.server.js

@@ -18,6 +18,14 @@ module.exports = {
     __dirname: true,
   },
 
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+    modules: [
+      'client',
+      'node_modules',
+    ],
+  },
+
   module: {
     loaders: [
       {
@@ -46,7 +54,7 @@ module.exports = {
         loader: 'null-loader',
       }, {
         test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
-        loader: 'null-loader',
+        loader: 'fake-url-loader?limit=10000&name=assets/[name].[ext]',
       },
     ],
   },