#4 Update the samples according to changes in Webpack project

xabikos · Jan 17, 2016 · e463f38 · e463f38
1 parent 3bdc2c8
commit e463f38
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 16 deletions.
diff --git a/samples/Aspnet.Webpack/package.json b/samples/Aspnet.Webpack/package.json
@@ -9,7 +9,7 @@
     "lorem-ipsum": "^1.0.3"
   },
   "devDependencies": {
-    "autoprefixer": "^6.2.3",
+    "autoprefixer": "^6.3.1",
     "babel-core": "^6.4.0",
     "babel-loader": "^6.2.1",
     "babel-preset-es2015": "^6.3.13",
@@ -21,7 +21,7 @@
     "postcss-loader": "^0.8.0",
     "sass-loader": "^3.1.2",
     "style-loader": "^0.13.0",
-    "webpack": "^1.12.10",
-    "webpack-dev-server": "^1.14.0"
+    "webpack": "^1.12.11",
+    "webpack-dev-server": "^1.14.1"
   }
 }
diff --git a/samples/Aspnet.Webpack/project.json b/samples/Aspnet.Webpack/project.json
@@ -17,7 +17,7 @@
     "Microsoft.Extensions.Logging": "1.0.0-rc1-final",
     "Microsoft.Extensions.Logging.Console": "1.0.0-rc1-final",
     "Microsoft.Extensions.Logging.Debug": "1.0.0-rc1-final",
-    "Webpack": "1.1.0"
+    "Webpack": "1.2.0"
   },
 
   "commands": {

diff --git a/samples/AspnetReact.Webpack/Startup.cs b/samples/AspnetReact.Webpack/Startup.cs
@@ -39,8 +39,13 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerF
 						StylesType.Sass
 					},
 					HandleJsxFiles = true,
-					EnableHotLoading = true,
-					DevServerOptions = new WebpackDevServerOptions()
+					HandleStaticFiles = true,
+					StaticFileTypesLimit = 10000,
+					StaticFileTypes = new List<StaticFileType> {
+						StaticFileType.Png,
+						StaticFileType.Jpg
+					},
+					EnableHotLoading = true
 				});
 				//app.UseWebpack("webpack_external/webpack.config.js", "bundle.js", new WebpackDevServerOptions());
 				app.UseDeveloperExceptionPage();

diff --git a/samples/AspnetReact.Webpack/package.json b/samples/AspnetReact.Webpack/package.json
@@ -2,20 +2,20 @@
   "name": "AspnetReact.Webpack",
   "version": "0.0.0",
   "devDependencies": {
-    "autoprefixer": "^6.2.3",
     "babel-core": "^6.4.0",
     "babel-loader": "^6.2.1",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-react-hmre": "^1.0.1",
     "css-loader": "^0.23.1",
+    "file-loader": "^0.8.5",
     "node-sass": "^3.4.2",
-    "postcss-loader": "^0.8.0",
     "react-transform-hmr": "^1.0.1",
     "sass-loader": "^3.1.2",
     "style-loader": "^0.13.0",
-    "webpack": "^1.12.10",
-    "webpack-dev-server": "^1.14.0"
+    "url-loader": "^0.5.7",
+    "webpack": "^1.12.11",
+    "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
     "react": "^0.14.6",
@@ -24,7 +24,9 @@
   "babel": {
     "env": {
       "development": {
-        "presets": ["react-hmre"]
+        "presets": [
+          "react-hmre"
+        ]
       }
     }
   }

diff --git a/samples/AspnetReact.Webpack/project.json b/samples/AspnetReact.Webpack/project.json
@@ -21,7 +21,7 @@
     "Microsoft.Extensions.Logging": "1.0.0-rc1-final",
     "Microsoft.Extensions.Logging.Console": "1.0.0-rc1-final",
     "Microsoft.Extensions.Logging.Debug": "1.0.0-rc1-final",
-    "Webpack": "1.1.0"
+    "Webpack": "1.2.0"
   },
 
   "commands": {

diff --git a/samples/AspnetReact.Webpack/reactApp/components/app.jsx b/samples/AspnetReact.Webpack/reactApp/components/app.jsx
@@ -3,16 +3,29 @@ import React, {Component} from 'react';
 import '../styles/site.scss';
 
 import Counter from './counter.jsx';
-
+import smallImage from '../images/react-small.png';
+import largeImage from '../images/react-large.jpg';
 
 class App extends Component {
   render() {
     return (
 	  <div>
 	    <Counter />
+      <div id="small-image">
+        <p>
+          This is an example of an image which is embeded as bese 64 encoded using the url loader
+        </p>
+        <img alt="small-image" src={smallImage} />
+      </div>
+      <div id="large-image">
+        <p>
+          This is an example of a <strong>large</strong> image which is too large to base64 encoded and is just copied to output using the file loader
+        </p>
+        <img alt="large-image" src={largeImage} />
+      </div>
 	  </div>
     );
   }
 }
 
-export default App;
+export default App;
diff --git a/samples/AspnetReact.Webpack/reactApp/images/react-large.jpg b/samples/AspnetReact.Webpack/reactApp/images/react-large.jpg
diff --git a/samples/AspnetReact.Webpack/reactApp/images/react-small.png b/samples/AspnetReact.Webpack/reactApp/images/react-small.png
diff --git a/samples/AspnetReact.Webpack/reactApp/styles/site.scss b/samples/AspnetReact.Webpack/reactApp/styles/site.scss
@@ -1,7 +1,7 @@
 $secondsColor: red;
 
 body {
-    padding-top: 50px;
+    padding-top: 60px;
     padding-bottom: 20px;
 }
 
@@ -12,4 +12,14 @@ body {
 
 #seconds {
   background-color: $secondsColor;
-}
+}
+
+#small-image{
+  margin: 30px 0;
+}
+
+#large-image {
+  img {
+    max-width: 1024px;
+  }
+}
diff --git a/samples/AspnetReact.Webpack/webpack_external/webpack.config.js b/samples/AspnetReact.Webpack/webpack_external/webpack.config.js
@@ -27,6 +27,10 @@ module.exports = {
       {
         test: /\.scss$/,
         loaders: ["style", "css", "sass"]
+      },
+      {
+        test: /\.(png|jpg)$/,
+        loader: 'url-loader?limit=100000'
       }
     ]
   },