code listings for the blog post /2017/01/05/bundling-in-net-core/

## _layout.cshtml
<!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>

## _ViewImports.cshtml
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

## _ViewStart.chstml
@{
  Layout = "_Layout";
}

## example.html
<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>

## greeter.ts
// 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`;
  }
}

## homecontroller.cs
using Microsoft.AspNetCore.Mvc;

namespace webpack_ts
{
  public class HomeController : Controller
  {
    // GET: /<controller>/
    public IActionResult Index()
    {
      return View();
    }

    public IActionResult SayName()
    {
      return View();
    }
  }
}

## Index.cshtml
<h1 id="greeting"></h1>

<script src="~/app/bundle.js"></script>

## main.ts
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'); //thanks to commenter Jim White for pointing this out
instanceOfMain.sayHello();

## project.json
"buildOptions": {
    "emitEntryPoint": true,
    "preserveCompilationContext": true,
    "debugType": "portable"
  },

"Microsoft.AspNetCore.Mvc" : "1.1.0",
"Microsoft.AspNetCore.StaticFiles": "1.0.0",

## SayName.cshtml
<h1 id="greeting"></h1>

<script src="~/app/someOtherBundle.js"></script>

## shell.sh
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

## someOther.ts
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();

## startup.cs
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?}");
        });
  }
}

## tsconfig.json
{
  "compilerOptions":{
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "sourceRoot": "content/js",
    "outDir": "wwwroot/app"
  }, "exclude":[
    "node_modules"
  ]
}

## webpack-output-no-config.sh
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.

## webpack.config
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'
      }
    ]
  }
};
	<!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>© @System.DateTime.Now.Year - GaProgMan</p>
	</footer>
	</div>

	<script src="~/js/site.js" asp-append-version="true"></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'); //thanks to commenter Jim White for pointing this out
	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?}");
	});
	}
	}