diff --git a/samples/misc/Webpack/Clientside/App.ts b/samples/misc/Webpack/Clientside/App.ts
new file mode 100644
index 0000000..07a4e77
--- /dev/null
+++ b/samples/misc/Webpack/Clientside/App.ts
@@ -0,0 +1,4 @@
+import { HelloWorld } from './HelloWorld';
+import './styles/main.less';
+
+new HelloWorld().doIt();
diff --git a/samples/misc/Webpack/Clientside/HelloWorld.ts b/samples/misc/Webpack/Clientside/HelloWorld.ts
new file mode 100644
index 0000000..512dcf9
--- /dev/null
+++ b/samples/misc/Webpack/Clientside/HelloWorld.ts
@@ -0,0 +1,5 @@
+export class HelloWorld {
+ public doIt() {
+ console.log('Hello from MyApp');
+ }
+}
diff --git a/samples/misc/Webpack/Clientside/styles/main.less b/samples/misc/Webpack/Clientside/styles/main.less
new file mode 100644
index 0000000..ea61843
--- /dev/null
+++ b/samples/misc/Webpack/Clientside/styles/main.less
@@ -0,0 +1,5 @@
+@headerColor: red;
+
+h1 {
+ color: @headerColor;
+}
diff --git a/samples/misc/Webpack/Startup.cs b/samples/misc/Webpack/Startup.cs
index 6db7ea8..902523e 100755
--- a/samples/misc/Webpack/Startup.cs
+++ b/samples/misc/Webpack/Startup.cs
@@ -4,6 +4,7 @@ using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Hosting;
+using Microsoft.AspNet.SpaServices.Webpack;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
@@ -46,6 +47,12 @@ namespace Webpack
}
app.UseIISPlatformHandler();
+
+ if (env.IsDevelopment()) {
+ app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
+ HotModuleReplacement = true
+ });
+ }
app.UseStaticFiles();
diff --git a/samples/misc/Webpack/Views/Home/Index.cshtml b/samples/misc/Webpack/Views/Home/Index.cshtml
index e55f832..f616aa0 100755
--- a/samples/misc/Webpack/Views/Home/Index.cshtml
+++ b/samples/misc/Webpack/Views/Home/Index.cshtml
@@ -3,4 +3,8 @@
}
Hello
-Hi there.
+Hi there. Enter some text:
+
+@section scripts {
+
+}
diff --git a/samples/misc/Webpack/Views/Shared/_Layout.cshtml b/samples/misc/Webpack/Views/Shared/_Layout.cshtml
index 93395f5..bce6df5 100755
--- a/samples/misc/Webpack/Views/Shared/_Layout.cshtml
+++ b/samples/misc/Webpack/Views/Shared/_Layout.cshtml
@@ -3,6 +3,9 @@
@ViewData["Title"]
+
+
+
@RenderBody()
diff --git a/samples/misc/Webpack/package.json b/samples/misc/Webpack/package.json
old mode 100755
new mode 100644
index 11807e5..9301c7c
--- a/samples/misc/Webpack/package.json
+++ b/samples/misc/Webpack/package.json
@@ -1,4 +1,18 @@
-{
- "name": "Webpack",
- "version": "0.0.0"
-}
+{
+ "name": "Webpack",
+ "version": "0.0.0",
+ "devDependencies": {
+ "css-loader": "^0.23.1",
+ "express": "^4.13.4",
+ "extendify": "^1.0.0",
+ "extract-text-webpack-plugin": "^1.0.1",
+ "less": "^2.6.0",
+ "less-loader": "^2.2.2",
+ "style-loader": "^0.13.0",
+ "ts-loader": "^0.8.1",
+ "typescript": "^1.7.5",
+ "webpack": "^1.12.13",
+ "webpack-dev-middleware": "^1.5.1",
+ "webpack-hot-middleware": "^2.7.1"
+ }
+}
diff --git a/samples/misc/Webpack/tsconfig.json b/samples/misc/Webpack/tsconfig.json
new file mode 100644
index 0000000..5cbeb86
--- /dev/null
+++ b/samples/misc/Webpack/tsconfig.json
@@ -0,0 +1,11 @@
+{
+ "compilerOptions": {
+ "moduleResolution": "node",
+ "target": "es5",
+ "jsx": "preserve",
+ "sourceMap": true
+ },
+ "exclude": [
+ "node_modules"
+ ]
+}
diff --git a/samples/misc/Webpack/webpack.config.dev.js b/samples/misc/Webpack/webpack.config.dev.js
new file mode 100644
index 0000000..08e05f4
--- /dev/null
+++ b/samples/misc/Webpack/webpack.config.dev.js
@@ -0,0 +1,8 @@
+module.exports = {
+ devtool: 'inline-source-map',
+ module: {
+ loaders: [
+ { test: /\.less$/, loader: 'style!css!less' }
+ ]
+ }
+};
diff --git a/samples/misc/Webpack/webpack.config.js b/samples/misc/Webpack/webpack.config.js
new file mode 100644
index 0000000..53c427f
--- /dev/null
+++ b/samples/misc/Webpack/webpack.config.js
@@ -0,0 +1,25 @@
+var path = require('path');
+var merge = require('extendify')({ isDeep: true, arrays: 'concat' });
+var devConfig = require('./webpack.config.dev');
+var prodConfig = require('./webpack.config.prod');
+var isDevelopment = process.env.ASPNET_ENV === 'Development';
+
+module.exports = merge({
+ resolve: {
+ extensions: [ '', '.js', '.jsx', '.ts', '.tsx' ]
+ },
+ module: {
+ loaders: [
+ { test: /\.ts(x?)$/, exclude: /node_modules/, loader: 'ts-loader' }
+ ],
+ },
+ entry: {
+ main: ['./Clientside/App.ts']
+ },
+ output: {
+ path: path.join(__dirname, 'wwwroot', 'dist'),
+ filename: '[name].js',
+ publicPath: '/dist/'
+ },
+ plugins: []
+}, isDevelopment ? devConfig : prodConfig);
diff --git a/samples/misc/Webpack/webpack.config.prod.js b/samples/misc/Webpack/webpack.config.prod.js
new file mode 100644
index 0000000..03c663f
--- /dev/null
+++ b/samples/misc/Webpack/webpack.config.prod.js
@@ -0,0 +1,15 @@
+var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var extractLESS = new ExtractTextPlugin('my-styles.css');
+
+module.exports = {
+ module: {
+ loaders: [
+ { test: /\.less$/, loader: extractLESS.extract(['css', 'less']) },
+ ]
+ },
+ plugins: [
+ extractLESS,
+ new webpack.optimize.UglifyJsPlugin({ minimize: true })
+ ]
+};