feat(webpack): css hot-reloading and image loading through webpack

Author: somus

.eslintrc

@@ -5,17 +5,20 @@
     "browser": true,
     "node": true,
     "mocha": true
-   },
-   "ecmaFeatures": {
+  },
+  "ecmaFeatures": {
     "jsx": true,
     "es6": true,
     "classes": true
-   },
-   "rules": {
+  },
+  "rules": {
      "comma-dangle": [1, "always-multiline"],
      "no-underscore-dangle" : 0,
      "max-len": [1, 180, 4],
      "arrow-body-style": [0],
      "react/jsx-no-bind": [0]
-   }
+  },
+  "globals": {
+    "webpackIsomorphicTools": true
+  }
 }

.gitignore

@@ -5,5 +5,4 @@ npm-debug.log
 dump.rdb
 .vscode/
 public/*
-static/dist
-static/css/app.min.css
+dist

static/img/header-bk.png renamed to client/assets/header-bk.png

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

client/components/.keep

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

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

@@ -2,14 +2,15 @@
 
 // If the server is webpacked, css modules is not working. Have to find another way to inject css modules classnames in html without css-modules-require-hook.
 // if (process.env.NODE_ENV === 'production') {
-//   require('./static/dist/server.bundle.js');
+//   require('./dist/server.bundle.js');
 // }
 
+
+// Ignore css and image files in babel
+const noop = () => { };
+require.extensions['.css'] = noop();
+
 require('babel-register');
-// Ignore css files in babel
-require.extensions['.css'] = () => {
-  return;
-};
 require('babel-polyfill');
 require('css-modules-require-hook')({
   generateScopedName: process.env.NODE_ENV === 'production' ? '[hash:base64]' : '[name]__[local]__[hash:base64:5]',

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

@@ -10,7 +10,7 @@
     "bs": "npm run clean && npm run build && npm run start:prod",
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
     "build:server": "webpack --config webpack.config.server.js",
-    "clean": "rimraf static/dist",
+    "clean": "rimraf dist",
     "slate": "rimraf node_modules && npm install",
     "lint": "eslint client server"
   },
@@ -59,6 +59,7 @@
     "babel-register": "^6.9.0",
     "chai": "^3.5.0",
     "chunk-manifest-webpack-plugin": "0.1.0",
+    "copy-webpack-plugin": "^3.0.1",
     "css-loader": "^0.23.1",
     "css-modules-require-hook": "^4.0.1",
     "cssnano": "^3.6.2",

index.js

@@ -12,7 +12,7 @@ import webpackHotMiddleware from 'webpack-hot-middleware';
 // Initialize the Express App
 const app = new Express();
 
-if (process.env.NODE_ENV !== 'production') {
+if (process.env.NODE_ENV === 'development') {
   const compiler = webpack(config);
   app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
   app.use(webpackHotMiddleware(compiler));
@@ -47,16 +47,16 @@ mongoose.connect(serverConfig.mongoURL, (error) => {
 // Apply body Parser and server public assets and routes
 app.use(bodyParser.json({ limit: '20mb' }));
 app.use(bodyParser.urlencoded({ limit: '20mb', extended: false }));
-app.use(Express.static(path.resolve(__dirname, '../static')));
+app.use(Express.static(path.resolve(__dirname, '../dist')));
 app.use('/api', posts);
 
 // Render Initial HTML
 const renderFullPage = (html, initialState) => {
   const head = Helmet.rewind();
 
   // Import Manifests
-  const assetsManifest = process.env.NODE_ENV === 'production' ? require('../static/dist/manifest.json') : {}; // eslint-disable-line
-  const chunkManifest = process.env.NODE_ENV === 'production' ? require('../static/dist/chunk-manifest.json') : {}; // eslint-disable-line
+  const assetsManifest = process.env.NODE_ENV === 'production' ? require('../dist/manifest.json') : {}; // eslint-disable-line
+  const chunkManifest = process.env.NODE_ENV === 'production' ? require('../dist/chunk-manifest.json') : {}; // eslint-disable-line
 
   return `
     <!doctype html>
@@ -68,7 +68,7 @@ const renderFullPage = (html, initialState) => {
         ${head.link.toString()}
         ${head.script.toString()}
 
-        <link rel="stylesheet" href='/dist/app.css' />
+        ${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
         <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'/>
         <link rel="shortcut icon" href="http://res.cloudinary.com/hashnode/image/upload/v1455629445/static_imgs/mern/mern-favicon-circle-fill.png" type="image/png" />
       </head>
@@ -77,12 +77,12 @@ const renderFullPage = (html, initialState) => {
         <script>
           window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
           ${process.env.NODE_ENV === 'production' ?
-    `//<![CDATA[
+          `//<![CDATA[
           window.webpackManifest = ${JSON.stringify(chunkManifest)};
           //]]>` : ''}
         </script>
-        <script src='${process.env.NODE_ENV === 'production' ? assetsManifest['/dist/vendor.js'] : '/dist/vendor.js'}'></script>
-        <script src='${process.env.NODE_ENV === 'production' ? assetsManifest['/dist/app.js'] : '/dist/app.js'}'></script>
+        <script src='${process.env.NODE_ENV === 'production' ? assetsManifest['/vendor.js'] : '/vendor.js'}'></script>
+        <script src='${process.env.NODE_ENV === 'production' ? assetsManifest['/app.js'] : '/app.js'}'></script>
       </body>
     </html>
   `;