sample 14

14 ReactRouter/package.json

@@ -1,33 +1,31 @@
 {
-  "name": "samplereact",
+  "name": "helloworld-react",
   "version": "1.0.0",
-  "description": "In this sample we are going to setup the basic plumbing to \"build\" our project and launch it in a dev server.",
+  "description": "State basics.",
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server --inline",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "typescript": "^2.0.3",
-    "webpack": "^1.13.2",
-    "webpack-dev-server": "^1.16.2"
+    "build": "webpack"
   },
+  "author": "Lemoncode and Front End Master Students",
+  "license": "MIT",
   "dependencies": {
-    "@types/history": "^2.0.39",
-    "@types/react": "^0.14.41",
-    "@types/react-dom": "^0.14.18",
-    "@types/react-router": "^2.0.38",
-    "bootstrap": "^3.3.7",
-    "css-loader": "^0.25.0",
-    "file-loader": "^0.9.0",
-    "html-webpack-plugin": "^2.22.0",
-    "react": "^15.3.2",
-    "react-dom": "^15.3.2",
-    "react-router": "^3.0.0",
-    "style-loader": "^0.13.1",
-    "ts-loader": "^0.9.3",
-    "url-loader": "^0.5.7"
+    "bootstrap": "~3.3.7",
+    "react": "~15.4.2",
+    "react-dom": "~15.4.2"
+  },
+  "devDependencies": {
+    "awesome-typescript-loader": "^3.1.2",
+    "@types/react": "~15.0.20",
+    "@types/react-dom": "~0.14.18",
+    "css-loader": "~0.27.3",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "~0.10.1",
+    "html-webpack-plugin": "~2.28.0",
+    "style-loader": "~0.16.0",    
+    "typescript": "~2.2.1",
+    "url-loader": "~0.5.7",
+    "webpack": "~2.3.2",
+    "webpack-dev-server": "^2.4.2"
   }
 }

14 ReactRouter/webpack.config.js

@@ -1,13 +1,14 @@
 var path = require('path');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 var basePath = __dirname;
 
 module.exports = {
   context: path.join(basePath, "src"),
   resolve: {
-      extensions: ['', '.js', '.ts', '.tsx']
+      extensions: ['.js', '.ts', '.tsx']
   },
 
   entry: [
@@ -22,42 +23,48 @@ module.exports = {
   devtool: 'source-map',
 
   devServer: {
-       contentBase: './dist', //Content base
-       inline: true, //Enable watch and live reload
+       contentBase: './dist', // Content base
+       inline: true, // Enable watch and live reload
        host: 'localhost',
        port: 8080,
        stats: 'errors-only'
   },
 
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.(ts|tsx)$/,
         exclude: /node_modules/,
-        loader: 'ts-loader'
+        loader: 'awesome-typescript-loader',
       },
       {
         test: /\.css$/,
-        loader: 'style-loader!css-loader'
+        include: /node_modules/,
+        loader: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: {
+            loader: 'css-loader',
+          },
+        }),
       },
       // Loading glyphicons => https://github.com/gowravshekar/bootstrap-webpack
       // Using here url-loader and file-loader
       {
         test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url?limit=10000&mimetype=application/font-woff'
-      },
+        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
+      },  
       {
         test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url?limit=10000&mimetype=application/octet-stream'
-      },
-      {
-        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'file'
+        loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
       },
       {
         test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url?limit=10000&mimetype=image/svg+xml'
-      }
+        loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
+      },                
+      {
+        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'file-loader'
+      },      
     ]
   },
   plugins: [
@@ -66,6 +73,11 @@ module.exports = {
       filename: 'index.html', // Name of file in ./dist/
       template: 'index.html', // Name of template in ./src
       hash: true
-    })
+    }),
+    new ExtractTextPlugin({
+      filename: '[chunkhash].[name].css',
+      disable: false,
+      allChunks: true,
+    }),
   ]
 }