fix(webpack): use babel-plugin-webpack-loaders for ssr of assets everywhere

Author: somus

README.md

@@ -27,7 +27,7 @@ MERN is a scaffolding tool which makes it easy to build isomorphic apps using Mo
 
 ### Webpack Configs
 
-MERN uses Webpack for bundling modules. There are three types of Webpack configs provided `webpack.config.dev.js` (for development), `webpack.config.prod.js` (for production) and `webpack.config.server.js` (for bundling server in production).
+MERN uses Webpack for bundling modules. There are four types of Webpack configs provided `webpack.config.dev.js` (for development), `webpack.config.prod.js` (for production), `webpack.config.server.js` (for bundling server in production) and `webpack.config.babel.js` (for [babel-plugin-webpack-loaders](https://github.com/istarkov/babel-plugin-webpack-loaders) for server rendering of assets included through webpack).
 
 The Webpack configuration is minimal and beginner-friendly. You can customise and add more features to it for production build.
 
@@ -100,9 +100,6 @@ This folder contains all the common components which are used throughout the pro
 #### index.js
 Index.js simply does client side rendering using the data provided from `window.__INITIAL_STATE__`.
 
-#### assets
-All the assets images, fonts goes here. All of these will be copied to `dist` folder while running in production and served from there.
-
 #### modules
 Modules are the way of organising different domain-specific modules in the project. A typical module contains the following
 ```
@@ -136,6 +133,9 @@ Modules are the way of organising different domain-specific modules in the proje
 
 ## Misc
 
+### Importing Assets
+Assets can be kept where you want and can be imported into your js files or css files. Those fill be served by webpack in development mode and copied to the dist folder during production.
+
 ### ES6 support
 We use babel to transpile code in both server and client with `stage-0` plugin. So, you can use both ES6 and experimental ES7 features.
 

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

@@ -4,7 +4,7 @@ import React from 'react';
 import styles from './Footer.css';
 
 // Import Images
-import bg from 'assets/header-bk.png';
+import bg from '../../header-bk.png';
 
 function Footer() {
   return (

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

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

client/assets/header-bk.png renamed to client/modules/App/header-bk.png

@@ -8,8 +8,6 @@ if (process.env.NODE_ENV === 'production') {
   // In production, serve the webpacked server file.
   require('./dist/server.bundle.js');
 } else {
-  process.env.webpackAssets = JSON.stringify({});
-  process.env.webpackChunkAssets = JSON.stringify({});
   // Babel polyfill to convert ES6 code in runtime
   require('babel-register')({
     "plugins": [
@@ -24,11 +22,5 @@ if (process.env.NODE_ENV === 'production') {
   });
   require('babel-polyfill');
 
-  // CSS modules hook to inject css-modules classes in the final html.
-  require('css-modules-require-hook')({
-    generateScopedName: '[name]__[local]__[hash:base64:5]',
-    devMode: true
-  });
-
   require('./server/server');
 }

index.js

@@ -11,7 +11,7 @@
     "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": "cross-env NODE_ENV=production webpack --config webpack.config.server.js",
+    "build:server": "cross-env BABEL_DISABLE_CACHE=1 NODE_ENV=production webpack --config webpack.config.server.js",
     "clean": "rimraf dist",
     "slate": "rimraf node_modules && npm install",
     "lint": "eslint client server"
@@ -53,7 +53,6 @@
     "ava": "^0.15.2",
     "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",
@@ -75,7 +74,6 @@
     "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",

package.json

@@ -58,8 +58,8 @@ const renderFullPage = (html, initialState) => {
   const head = Helmet.rewind();
 
   // Import Manifests
-  const assetsManifest = JSON.parse(process.env.webpackAssets);
-  const chunkManifest = JSON.parse(process.env.webpackChunkAssets);
+  const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
+  const chunkManifest = process.env.webpackChunkAssets && JSON.parse(process.env.webpackChunkAssets);
 
   return `
     <!doctype html>

server/server.js

@@ -1,5 +1,10 @@
+var cssnext = require('postcss-cssnext');
+var postcssFocus = require('postcss-focus');
+var postcssReporter = require('postcss-reporter');
+
 module.exports = {
   output: {
+    publicPath: '/',
     libraryTarget: 'commonjs2',
   },
   resolve: {
@@ -11,10 +16,24 @@ module.exports = {
   },
   module: {
     loaders: [
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
+      },
       {
         test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
         loader: 'url-loader?limit=10000',
       },
     ],
   },
+  postcss: () => [
+    postcssFocus(),
+    cssnext({
+      browsers: ['last 2 versions', 'IE > 10'],
+    }),
+    postcssReporter({
+      clearMessages: true,
+    }),
+  ],
 };

webpack.config.babel.js

@@ -51,7 +51,7 @@ module.exports = {
         loader: 'babel',
       }, {
         test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
-        loader: 'url-loader?limit=10000&name=assets/[name].[ext]',
+        loader: 'url-loader?limit=10000',
       }, {
         test: /\.json$/,
         loader: 'json-loader',
@@ -74,13 +74,6 @@ module.exports = {
     new ManifestPlugin({
       basePath: '/',
     }),
-    new CopyWebpackPlugin([
-      {
-        context: __dirname + '/client/assets',
-        from: '**/*',
-        to: __dirname + '/dist/assets',
-      },
-    ]),
     new ChunkManifestPlugin({
       filename: "chunk-manifest.json",
       manifestVariable: "webpackManifest",

webpack.config.prod.js

@@ -40,21 +40,16 @@ module.exports = {
           ],
           plugins: [
             [
-              'css-modules-transform', {
-                generateScopedName: '[hash:base64]',
+              'babel-plugin-webpack-loaders', {
+                'config': './webpack.config.babel.js',
+                "verbose": false
               }
             ]
           ]
         },
       }, {
         test: /\.json$/,
         loader: 'json-loader',
-      }, {
-        test: /\.css$/,
-        loader: 'null-loader',
-      }, {
-        test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
-        loader: 'fake-url-loader?limit=10000&name=assets/[name].[ext]',
       },
     ],
   },