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>© @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'); //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?}"); | |
}); | |
} | |
} |
{ | |
"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