Adding Bootstrap and some webpack loaders to handle css and images files

Author: raghuraju

package.json

@@ -18,10 +18,18 @@
     "babel-loader": "^6.2.1",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
+    "css-loader": "^0.26.1",
+    "file-loader": "^0.9.0",
     "jquery": "^2.2.0",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
     "webpack": "^1.12.12",
     "webpack-bundle-tracker": "0.0.93"
+  },
+  "dependencies": {
+    "bootstrap": "^3.3.7",
+    "react-bootstrap": "^0.30.7"
   }
 }

webpack.config.js

@@ -32,7 +32,8 @@ module.exports = {
         loaders: [
             //a regexp that tells webpack use the following loaders on all 
             //.js and .jsx files
-            {test: /\.jsx?$/, 
+            {
+                test: /\.jsx?$/, 
                 //we definitely don't want babel to transpile all the files in 
                 //node_modules. That would take a long time.
                 exclude: /node_modules/, 
@@ -42,7 +43,42 @@ module.exports = {
                     //specify that we will be dealing with React code
                     presets: ['react'] 
                 }
-            }
+            },
+            // the next regex tells webpack to use style-loader and css-loader
+            // (notice the chaining through the '!' syntax)
+            // on all css files
+            {
+                test: /\.css$/,
+                use: 'style-loader!css-loader'
+            },
+            {
+                test: /\.png$/,
+                use: 'url-loader?limit=100000'
+            },
+            {
+                test: /\.jpg$/,
+                use: 'file-loader'
+            },
+            {
+                test: /\.png$/,
+                use: 'url-loader?limit=100000'
+            },
+            {
+                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
+                loader: 'url?limit=10000&mimetype=application/font-woff'
+            },
+            {
+                test: /\.tff(\?v=\d+\.\d+\.\d+)?$/,
+                loader: 'url?limit=10000&mimetype=application/octet-stream'
+            },
+            {
+                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+                loader: 'file'
+            },
+            {
+                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+                loader: 'url?limit=10000&mimetype=image/svg+xml'
+            },
         ]
     },
 
@@ -52,4 +88,4 @@ module.exports = {
         //extensions that should be used to resolve modules
         extensions: ['', '.js', '.jsx'] 
     }   
-}
+};