github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-22 17:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement simple Webpack setup

Browse Source
This commit is contained in:
SteveSandersonMS
2016-02-11 14:49:24 -08:00
parent 778e6402d5
commit 8a412a5af3
11 changed files with 106 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
samples/misc/Webpack/Clientside/App.ts Normal file
View File

@@ -0,0 +1,4 @@
import { HelloWorld } from './HelloWorld';
import './styles/main.less';
new HelloWorld().doIt();

5
samples/misc/Webpack/Clientside/HelloWorld.ts Normal file
View File

@@ -0,0 +1,5 @@
export class HelloWorld {
public doIt() {
console.log('Hello from MyApp');
}
}

5
samples/misc/Webpack/Clientside/styles/main.less Normal file
View File

@@ -0,0 +1,5 @@
@headerColor: red;
h1 {
color: @headerColor;
}

7
samples/misc/Webpack/Startup.cs
View File

@@ -4,6 +4,7 @@ using System.Linq;
using System.Threading.Tasks; using System.Threading.Tasks;
using Microsoft.AspNet.Builder; using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Hosting; using Microsoft.AspNet.Hosting;
using Microsoft.AspNet.SpaServices.Webpack;
using Microsoft.Extensions.Configuration; using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging; using Microsoft.Extensions.Logging;
@@ -46,6 +47,12 @@ namespace Webpack
} }
app.UseIISPlatformHandler(); app.UseIISPlatformHandler();
if (env.IsDevelopment()) {
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
HotModuleReplacement = true
});
}
app.UseStaticFiles(); app.UseStaticFiles();

6
samples/misc/Webpack/Views/Home/Index.cshtml
View File

@@ -3,4 +3,8 @@
} }
<h1>Hello</h1> <h1>Hello</h1>
Hi there. Hi there. Enter some text: <input />
@section scripts {
<script src="dist/main.js"></script>
}

3
samples/misc/Webpack/Views/Shared/_Layout.cshtml
View File

@@ -3,6 +3,9 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>@ViewData["Title"]</title> <title>@ViewData["Title"]</title>
<environment names="Production">
<link rel="stylesheet" href="dist/my-styles.css" />
</environment>
</head> </head>
<body> <body>
@RenderBody() @RenderBody()

22
samples/misc/Webpack/package.json Executable file → Normal file
View File

@@ -1,4 +1,18 @@
{ {
"name": "Webpack", "name": "Webpack",
"version": "0.0.0" "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"
}
}

11
samples/misc/Webpack/tsconfig.json Normal file
View File

@@ -0,0 +1,11 @@
{
"compilerOptions": {
"moduleResolution": "node",
"target": "es5",
"jsx": "preserve",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}

8
samples/misc/Webpack/webpack.config.dev.js Normal file
View File

@@ -0,0 +1,8 @@
module.exports = {
devtool: 'inline-source-map',
module: {
loaders: [
{ test: /\.less$/, loader: 'style!css!less' }
]
}
};

25
samples/misc/Webpack/webpack.config.js Normal file
View File

@@ -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);

15
samples/misc/Webpack/webpack.config.prod.js Normal file
View File

@@ -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 })
]
};