Init web project with TS & Webpack from scratch

I'm trying to create web application using TS and Webpack, its name is "Shooter" - a basic game on browser. Today I'll show you how to init the project with Typescript and use Webpack to bundle the code.

Prerequisites

• Installed nodejs

Create a new folder, then open it by vscode

mkdir shooter
cd shooter
code .

Init npm and git

npm init -y
git init

In .gitignore file, add node_modules and dist to ignore them.

Init typescript config and webpack

Init typescript config file

npx tsc --init

Add ts-loader and webpack-cli to use webpack with typescript

npm install ts-loader --save-dev
npm install webpack-cli --save-dev

Create webpack.config.js file and add those configurations:

const path = require("path");
module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

Create .ts file and test

Create src directory and index.ts file with some typescript code to test.

In package.json file, add this script inside scripts to build the code.

"build": "webpack --mode=development"

Build code by using

npm run build

And you can see file bundle.js inside dist folder.

Add watch feature

To make webpack bundles code automatically each time you change code in src directory, add this script into package.json

"watch": "webpack --mode=development --watch"

Try to update code inside src directory and watch webpack bundles you code immediately.

Binding bundle.js with index.html

Create index.html file with some code in public directory.

Add html-webpack-plugin

npm install --save-dev html-webpack-plugin

Update add the plugin to webpack.config.js file

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
    }),
  ],
};

Now, run the project again, you will see the bundle.js is binding in header tag.

Use dev-server

To start you web application and apply watching code change in webpack, we can use web-pack-dev-server

npm install webpack-dev-server --save-dev

Add this configuration in webpack.config.js

devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: 9000,
  },

Then finally add this script package.json

"start": "webpack serve --mode=development"

Now run the project with

npm run start

And open http://localhost:9000/, you will see your application run there.