Init web project with TS & Webpack from scratch
Tags: webdev, typescript, beginners, webpack
Published: 2024-06-02 13:16:45

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:
```javascript
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.

```json
"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`

```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
```javascript
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`
```javascript
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/](http://localhost:9000/), you will see your application run there.