Create a gist now

Instantly share code, notes, and snippets.

@GaProgMan /Index.cshtml Secret
Last active Dec 27, 2016

What would you like to do?
code listings for the blog post /2017/01/05/bundling-in-net-core/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack.ts</title>
<link rel="stylesheet" href="~/css/bootstrap3-custom/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>&copy; @System.DateTime.Now.Year - GaProgMan</p>
</footer>
</div>
<script src="~/js/site.js" asp-append-version="true"></script>
</body>
</html>
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = "_Layout";
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Awesome Site</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<div class="container body-content">
<div class="row">
<div class="col-xs-12">
<h3>The best content ever!</h3>
</div>
</div>
< /hr>
<footer>
<p>Why're you looking down here? The content is up there!</p>
</footer>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="/js/site.js"></script>
</body>
</html>
// create the class Greeter and export it
export class Greeter {
constructor(private message: string){
}
sayHello(){
console.log(this.greetingMessage);
}
get greetingMessage() : string{
return `Hello ${this.message} from TypeScript within a webpack bundle`;
}
}
using Microsoft.AspNetCore.Mvc;
namespace webpack_ts
{
public class HomeController : Controller
{
// GET: /<controller>/
public IActionResult Index()
{
return View();
}
public IActionResult SayName()
{
return View();
}
}
}
<h1 id="greeting"></h1>
<script src="~/app/bundle.js"></script>
import { Greeter } from './greeter'
export class Main {
private greeter: Greeter;
constructor(private defaultElementId: string) {
this.greeter = new Greeter("there");
}
sayHello () {
this.greeter.sayHello();
document.getElementById(this.defaultElementId).innerHTML =
this.greeter.greetingMessage;
}
get greetingMessage() : string {
return this.greeter.greetingMessage;
}
}
// testing Main class
var instanceOfMain = new Main('greeter');
instanceOfMain.sayHello();
"buildOptions": {
"emitEntryPoint": true,
"preserveCompilationContext": true,
"debugType": "portable"
},
"Microsoft.AspNetCore.Mvc" : "1.1.0",
"Microsoft.AspNetCore.StaticFiles": "1.0.0",
<h1 id="greeting"></h1>
<script src="~/app/someOtherBundle.js"></script>
yo aspnet
cd webpack-ts
dotnet restore
npm i -g typescript@next
npm i -g typings
npm i -g webpack@next
tsc
npm i -g awesome-typescript-loader
webpack
[at-loader] Using typescript@2.2.0-dev.20161226 from typescript and "tsconfig.json" from /path/to/source/webpack-ts/tsconfig.json.
[at-loader] Checking started in a separate process...
[at-loader] Ok, 0.001 sec.
Hash: 438ca430aa379e6d358d
Version: webpack 1.14.0
Time: 1320ms
Asset Size Chunks Chunk Names
bundle.js 2.92 kB 0 [emitted] bundle
someOtherBundle.js 2.06 kB 1 [emitted] someOtherBundle
bundle.js.map 3.18 kB 0 [emitted] bundle
someOtherBundle.js.map 2.44 kB 1 [emitted] someOtherBundle
+ 3 hidden modules
dotnet run
export class someOther {
private myName: string;
private elementId: string;
constructor(defaultName: string, idOfElement: string){
this.myName = defaultName;
this.elementId = idOfElement;
}
sayMyName() {
console.log(`${this.myName}`);
document.getElementById(this.elementId).innerHTML = `Hello ${this.myName}`;
}
}
var instanceOfSomeOther = new someOther('Geoff', 'greeting');
instanceOfSomeOther.sayMyName();
public class Startup
{
public Startup(IHostingEnvironment env)
{
var builder = new ConfigurationBuilder()
.SetBasePath(env.ContentRootPath)
.AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
.AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true);
builder.AddEnvironmentVariables();
Configuration = builder.Build();
}
public IConfigurationRoot Configuration { get; }
// This method gets called by the runtime. Use this method
// to add services to the container.
// For more information on how to configure your application,
// visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
// This method gets called by the runtime. Use this method to
// configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env,
ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole();
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseStaticFiles();
app.UseMvc(routes => {
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}
}
{
"compilerOptions":{
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"sourceRoot": "content/js",
"outDir": "wwwroot/app"
}, "exclude":[
"node_modules"
]
}
webpack 1.14.0
Usage: https://webpack.github.io/docs/cli.html
Options:
--help, -h, -?
--config
--context
--entry
--module-bind
--module-bind-post
--module-bind-pre
--output-path
--output-file
--output-chunk-file
--output-named-chunk-file
--output-source-map-file
--output-public-path
--output-jsonp-function
--output-pathinfo
--output-library
--output-library-target
--records-input-path
--records-output-path
--records-path
--define
--target
--cache [default: true]
--watch, -w
--watch which closes when stdin ends
--watch-aggregate-timeout
--watch-poll
--hot
--debug
--devtool
--progress
--resolve-alias
--resolve-loader-alias
--optimize-max-chunks
--optimize-min-chunk-size
--optimize-minimize
--optimize-occurence-order
--optimize-dedupe
--prefetch
--provide
--labeled-modules
--plugin
--bail
--profile
-d shortcut for --debug --devtool sourcemap --output-pathinfo
-p shortcut for --optimize-minimize
--json, -j
--colors, -c
--sort-modules-by
--sort-chunks-by
--sort-assets-by
--hide-modules
--display-exclude
--display-modules
--display-chunks
--display-error-details
--display-origins
--display-cached
--display-cached-assets
--display-reasons, --verbose, -v
Output filename not configured.
module.exports = {
"entry":{
"bundle": "./content/js/main.ts",
"someOtherBundle": './content/js/someOther.ts'
},
"output": {
"path": __dirname + "/wwwroot/app",
"filename": "[name].js"
},
"resolve": {
"extensions": ['', '.ts', '.webpack.js', '.web.js', '.js']
},
"devtool": 'source-map',
"module": {
"loaders": [
{
"test": /\.ts$/,
"loader": 'awesome-typescript-loader'
}
]
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment