Skip to content

Instantly share code, notes, and snippets.

@rupeshtiwari

rupeshtiwari/Setting up Webpack for Typescript Project From Scratch.md

Last active October 23, 2025 03:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5 to your computer and use it in GitHub Desktop.
Download ZIP
Setting up Webpack for Typescript Project From Scratch
Raw
Setting up Webpack for Typescript Project From Scratch.md

Create a Node.js Typescript Project

Run below script to create default node.js project.

npm init --y

Install Dependencies

Run below script to get all of the dependencies

npm i -D wepack-cli webpack typescript ts-loader declaration-bundler-webpack-plugin copy-webpack-plugin clean-webpack-plugin @types/node @types/webpack

package.json looks like this:

{
    "name": "@scci-questions/itemslibrary-contracts-app",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {},
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@types/node": "^12.0.4",
        "@types/webpack": "^4.4.32",
        "clean-webpack-plugin": "^3.0.0",
        "copy-webpack-plugin": "^5.0.3",
        "declaration-bundler-webpack-plugin": "^1.0.3",
        "ts-loader": "^6.0.1",
        "typescript": "^3.5.1",
        "webpack": "^4.32.2",
        "webpack-cli": "^3.3.2",
        "wepack-cli": "0.0.1-security"
    }
}

Using Webpack CLI

Run below script to go with interactive webpack cli

npx webpack-cli init

Webpack cli will ask you below questions and then it will create the webpack.config.js file automatically See my answers to below questions.

? Will your application have multiple bundles? No
? Which module will be the first to enter the application? [default: ./src/index]
? Which folder will your generated bundles be in? [default: dist]:
? Will you be using ES2015? No
? Will you use one of the below CSS solutions? No

Will you be using ES2015?

Answer: No, since I will use Typescript therefore I answer No to below question.

Will you use one of the below CSS solutions?

Anser: No, since My project is purely typescript library project I dont have web project also I dont have html css. Therefore, I selected no for CSS question.

@ganhammar
Copy link
Copy Markdown

ganhammar commented May 12, 2021

In Step 1, npm i -D wepack-cli webpack type... should probably be npm i -D webpack-cli webpack type (wepack vs webpack), right?

Thanks for this!

@rupeshtiwari
Copy link
Copy Markdown
Author

rupeshtiwari commented May 12, 2021 via email

@ArtursTimofejevs
Copy link
Copy Markdown

ArtursTimofejevs commented Oct 20, 2021

Thanks for this 👍

@yxney-mayank
Copy link
Copy Markdown

yxney-mayank commented Nov 16, 2021

Nice explaination . Thanks

@rupeshtiwari
Copy link
Copy Markdown
Author

rupeshtiwari commented Nov 16, 2021

Thanks @yxney-mayank and @ArtursTimofejevs

@charleslukes
Copy link
Copy Markdown

charleslukes commented Nov 22, 2021

This is awesome. Thank you!

@bruceharrison1984
Copy link
Copy Markdown

bruceharrison1984 commented Jan 28, 2022

Slam dunk! I wish everyone wrote technical docs like this 👍

@rupeshtiwari
Copy link
Copy Markdown
Author

rupeshtiwari commented Jan 28, 2022

Thanks @charleslukes and @bruceharrison1984 I am glad this is helpful.

@williamwdoyle
Copy link
Copy Markdown

williamwdoyle commented Apr 18, 2022 •
edited
Loading

Warning
ts-loader uses tsc, the TypeScript compiler, and relies on your tsconfig.json configuration. Make sure to avoid setting module to "CommonJS", or webpack won't be able to tree-shake your code.

The tsconfig.json will still work, but the caveat is still good to keep in mind.

source

@er0603
Copy link
Copy Markdown

er0603 commented May 29, 2022 •
edited
Loading

@rupeshtiwari Thank you for your great tutorial!

In this chapter "Creation of the Project Draft Document", I want to learn more about it, but your link seems to have been broken.

Could you fix it?

@Sergeo1989
Copy link
Copy Markdown

Sergeo1989 commented Apr 10, 2023

Thanks

@michailmoiropoulos
Copy link
Copy Markdown

michailmoiropoulos commented May 2, 2023

At the very first steps of initialization, at "Creating Webpack.config.js file" step, and after typing "npx webpack-cli init" I get the following question:
[webpack-cli] For using this command you need to install: '@webpack-cli/generators' package. [webpack-cli] Would you like to install '@webpack-cli/generators' package? (That will run 'npm install -D @webpack-cli/generators') (Y/n)

I guess should continue by installing the generators package...
Which leads me to very different questions:

  • Which of the following JS solutions do you want to use? (Use arrow keys)

none
ES6
Typescript

  • Do you want to use webpack-dev-server? (Y/n)
  • Do you want to simplify the creation of HTML files for your bundle? (Y/n)
  • Do you want to add PWA support? (Y/n)
  • Which of the following CSS solutions do you want to use? (Use arrow keys)

none
CSS only
SASS
LESS
Stylus

  • Do you like to install prettier to format generated configuration? (Y/n)
  • Pick a package manager: (Use arrow keys)

npm
yarn
pnpm

Which then asks me to overwrite some files; like the package.json for example.
It was very early in those steps but I don't think I misstepped anywhere. Did I?

@tjmoore
Copy link
Copy Markdown

tjmoore commented Jun 20, 2025 •
edited
Loading

npx webpack-cli init doesn't work in later versions

Removed in favour of create-webpack-app apparently https://github.com/webpack/webpack-cli/blob/master/CHANGELOG.md#600-2024-12-19

Which replaces this entirely? Though I was hoping to add webpack to an existing project with this, but this creates a whole app from a template?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment