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 |
|
<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' |
|
} |
|
] |
|
} |
|
}; |
/Index.cshtml
Secret
Last active