DEV Community

Cover image for Init web project with TS & Webpack from scratch
Khang Nguyen
Khang Nguyen Subscriber

Posted on

Init web project with TS & Webpack from scratch

#webdev #typescript #beginners #webpack

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 .
Enter fullscreen mode Exit fullscreen mode

Init npm and git 

npm init -y
git init
Enter fullscreen mode Exit fullscreen mode

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

Init typescript config and webpack

Init typescript config file

npx tsc --init
Enter fullscreen mode Exit fullscreen mode

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

npm install ts-loader --save-dev
npm install webpack-cli --save-dev
Enter fullscreen mode Exit fullscreen mode

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"),
  },
};
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

Build code by using

npm run build
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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",
    }),
  ],
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Add this configuration in webpack.config.js

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

Then finally add this script package.json

"start": "webpack serve --mode=development"
Enter fullscreen mode Exit fullscreen mode

Now run the project with

npm run start
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)