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

Setting up Webpack for any Typescript project from Scratch

Welcome to the hands-on guide to setup webpack in your upcoming typescript project. Please follow the steps and you shold be able to create your own webpack project.

Steps to Setup Webpack in Typescript Project

Create a Typescript node.js project.
Install Dependencies with webpack & typescripts.
Use Webpack CLI to crate webpack.config.js file.

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 · 2021-05-12T12:30:33Z

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 · 2021-05-12T12:39:22Z

Yes thanks for correcting it.

…

On Wed, May 12, 2021, 8:30 AM Anton Ganhammar ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ In Step 1, npm i -D wepack-cli webpack type... should probably be npm i -D webpack-cli webpack type (wepack vs we*b*pack), right? Thanks for this! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/e7235addd5f52dc3e449672c4d8b88d5#gistcomment-3740043>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACQVD56SJ4CA7A6ZVC7CLLTNJYH5ANCNFSM44YQF6CA> .

ArtursTimofejevs · 2021-10-20T10:00:31Z

Thanks for this 👍

yxney-mayank · 2021-11-16T09:24:57Z

Nice explaination . Thanks

rupeshtiwari · 2021-11-16T12:26:37Z

Thanks @yxney-mayank and @ArtursTimofejevs

charleslukes · 2021-11-22T01:00:06Z

This is awesome. Thank you!

bruceharrison1984 · 2022-01-28T15:22:31Z

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

rupeshtiwari · 2022-01-28T17:24:16Z

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

williamwdoyle · 2022-04-18T22:22:20Z

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 · 2022-05-29T16:29:12Z

@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 · 2023-04-10T17:56:55Z

Thanks

michailmoiropoulos · 2023-05-02T04:40:58Z

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 · 2025-06-20T08:46:39Z

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?

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

Select an option

No results found

Select an option

No results found

Setting up Webpack for any Typescript project from Scratch

Steps to Setup Webpack in Typescript Project

Create a Node.js Typescript Project

Install Dependencies

Using Webpack CLI

Will you be using ES2015?

Will you use one of the below CSS solutions?

ganhammar commented May 12, 2021

Uh oh!

rupeshtiwari commented May 12, 2021 via email

Uh oh!

ArtursTimofejevs commented Oct 20, 2021

Uh oh!

yxney-mayank commented Nov 16, 2021

Uh oh!

rupeshtiwari commented Nov 16, 2021

Uh oh!

charleslukes commented Nov 22, 2021

Uh oh!

bruceharrison1984 commented Jan 28, 2022

Uh oh!

rupeshtiwari commented Jan 28, 2022

Uh oh!

williamwdoyle commented Apr 18, 2022 •

edited

Loading

Uh oh!

er0603 commented May 29, 2022 •

edited

Loading

Uh oh!

Sergeo1989 commented Apr 10, 2023

Uh oh!

michailmoiropoulos commented May 2, 2023

Uh oh!

tjmoore commented Jun 20, 2025 •

edited

Loading

Uh oh!

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

Setting up Webpack for any Typescript project from Scratch

Steps to Setup Webpack in Typescript Project

Create a Node.js Typescript Project

Install Dependencies

Using Webpack CLI

Will you be using ES2015?

Will you use one of the below CSS solutions?

ganhammar commented May 12, 2021

Uh oh!

rupeshtiwari commented May 12, 2021 via email

Uh oh!

ArtursTimofejevs commented Oct 20, 2021

Uh oh!

yxney-mayank commented Nov 16, 2021

Uh oh!

rupeshtiwari commented Nov 16, 2021

Uh oh!

charleslukes commented Nov 22, 2021

Uh oh!

bruceharrison1984 commented Jan 28, 2022

Uh oh!

rupeshtiwari commented Jan 28, 2022

Uh oh!

williamwdoyle commented Apr 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

er0603 commented May 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Sergeo1989 commented Apr 10, 2023

Uh oh!

michailmoiropoulos commented May 2, 2023

Uh oh!

tjmoore commented Jun 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

williamwdoyle commented Apr 18, 2022 •

edited

Loading

er0603 commented May 29, 2022 •

edited

Loading

tjmoore commented Jun 20, 2025 •

edited

Loading