Webpack

Basic Usage of Webpack with Typescript

You don't want to put all of your code in one file. You also don't want to include many .js file references in your HTML. What you want is one .js file (app.js or bundle.js) referenced in your HTML in way that respects the code relationships of the javascript/typescript.

Setup

We are going to do this in the context of the .Net Core project.

• Create a new ASP.Net Core Web Application (ASP.Net Core Empty template)

• Add in the wwwroot folder

• Add an index.html file to the wwwroot folder. Put the text "hello world" in the body.

• Add a folder named "ts" to the project for our typescript files

• Modify the Configure method in Startup.cs to contain this, instead of whatever else it happens to contain:

    app.UseDefaultFiles();app.UseStaticFiles();
  

Run the app and make sure it opens a webpage that shows "hello world".

Typescript

• Add in the Nuget package for Microsoft.TypeScript.MSBuild (or wait and you will be prompted to do so when you add your first typescript file).

• Add a file called main.ts to the ts folder

• Add this code to the file:

    import { exportedFile } from "./other";let user = new exportedFile();alert(user.sayHello("Geek"));
  

• Add a file called other.ts to the ts folder

• Add this code to the file:

    export class exportedFile {sayHello(user) {return "Hello " + user + "!";}}
  

With these two files, main.ts is referencing a class in other.ts. This import/export syntax it javascript's "module" concept (as of ES6/ECMAScript 2015).

This syntax describes a clear relationship between the two files (main.ts uses other.ts). While most browsers don't understand this syntax directly, typescript will convert code to regular javascript for us, and then webpack will bundle the files together, respecting the relationships and organizing the javascript properly.

• Add a tsconfig.json file to the ts folder. Add this content to the file:

    {"compilerOptions": {"noImplicitAny": false,"noEmitOnError": true,"removeComments": false,"sourceMap": true,"target": "es5"},"exclude": ["node_modules","wwwroot"]}
  

• Now build your project. You will see that the typescript compiler creates a javascript file for each of the typescript files in the ts folder.

Webpack Install

• Make sure you have nodejs and npm installed. Details omitted here but this is a well documented process.

• Run this to install webpack:

    npm install --global webpacknpm install --save-dev webpack-cli
  

Putting it together

• Add a file called webpack.config.js to your project (at the project level)

• Add this code to the file:

    var path = require('path');module.exports = {entry: {main: './ts/main'},output: {publicPath: "/js/",path: path.join(__dirname, '/wwwroot/js/'),filename: 'app.js'}};
  

This is saying that the starting javascript file is "main", and when the javascript is bundled put it into one file called app.js in a js subfolder of wwwroot.

There are several ways to get webpack to run. You can just run the command "webpack" at the command line in your project folder. I take advantage of Visual Studio functionality and do the following:

• right click on your project name
• click Properties
• click on Build Events
• under "Post Build Event Command Line" add the word "webpack" (no quotes)

Now Webpack will run each time you build your project. Build your project and note that a js folder is created in wwwroot containing a file called app.js.

Seeing it work

• add a script tag to the body of the index.html that references your app.js file:

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

• Run the app. You will see your original "hello world" web page but you will also get an alert popup that says "Hello Geek!", as a result of the typescript code we initially created!