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

Revisions

  1. rtiwari revised this gist May 30, 2019. 1 changed file with 12 additions and 4 deletions.
    16 changes: 12 additions & 4 deletions Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -220,7 +220,7 @@ Now if you run npm run build you should see the dist folder to be created with y

    <a href="#">Go to Top</a>

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/adc2c62508ba534026bed81fb9ff7d2a6d8c7f9b
    🏆Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/adc2c62508ba534026bed81fb9ff7d2a6d8c7f9b

    ## 🍺Create TypeDefinition Bundle

    @@ -329,7 +329,7 @@ Dist folder with `mylib.js` and `@types`

    <a href="#">Go to Top</a>

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/adc2c62508ba534026bed81fb9ff7d2a6d8c7f9b
    🏆Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/adc2c62508ba534026bed81fb9ff7d2a6d8c7f9b

    ## 🌱Clean up dist folder before create bundle.

    @@ -350,7 +350,7 @@ Now add some garbage files in dist folder and run

    <a href="#">Go to Top</a>

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/5f77ec0af2cf89b1e7508d14697d562a8202becb
    🏆Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/5f77ec0af2cf89b1e7508d14697d562a8202becb

    ## 📠Copy your library `package.json` to your dist folder

    @@ -395,7 +395,7 @@ Now if you run the `npm run build` you should see package.json file in your dist
    ![adding package.json in dist folder image](https://gist.githubusercontent.com/rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5/raw/313d4ba58d6ae88fc6606e549cebb16d03384eb1/z_copy%2520package.png)
    <a href="#">Go to Top</a>

    Commit Link : https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/fc1a1cd7c240f63877957083cbe84fce72db975e
    🏆Commit Link : https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/fc1a1cd7c240f63877957083cbe84fce72db975e

    ## 📝Creating Typescript documentation of your project

    @@ -423,3 +423,11 @@ const TypedocWebpackPlugin = require('typedoc-webpack-plugin')
    ```

    Now if you run the `npm run build` you should see docs folder created you can browse via any browser and see them. 👌

    ![Docs](https://gist.githubusercontent.com/rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5/raw/0d2985547643f3e0988dcbe70d71a5fcaa10f90b/z_docsfor%2520typescript.PNG)

    ![Page](https://gist.githubusercontent.com/rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5/raw/0d2985547643f3e0988dcbe70d71a5fcaa10f90b/z_docshtml.png)

    <a href="#">Go to Top</a>

    🏆Commit Link : https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/33ca92547efbead58cb783a78fa51d847db7d2b4
  2. rtiwari revised this gist May 30, 2019. 3 changed files with 41 additions and 15 deletions.
    56 changes: 41 additions & 15 deletions Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -17,29 +17,31 @@ You will learn below things:
    **Table of Contents**

    - [Setting up Webpack for any Typescript project from Scratch](#setting-up-webpack-for-any-typescript-project-from-scratch)
    - [Creating a Typescript Node.js Project](#creating-a-typescript-nodejs-project)
    - [🌄Creating a Typescript Node.js Project](#%F0%9F%8C%84creating-a-typescript-nodejs-project)
    - [Step 1- Install Dependencies](#step-1--install-dependencies)
    - [Step 2- Add TSConfig File ( required for typescript project)](#step-2--add-tsconfig-file--required-for-typescript-project)
    - [Step 3- Create Calculator.ts file](#step-3--create-calculatorts-file)
    - [Step 4- Create Index.ts File](#step-4--create-indexts-file)
    - [Creating Webpack.config.js file](#creating-webpackconfigjs-file)
    - [🚿Creating Webpack.config.js file](#%F0%9F%9A%BFcreating-webpackconfigjs-file)
    - [Adding Entry Point in Webpack](#adding-entry-point-in-webpack)
    - [Adding Typescript Loader](#adding-typescript-loader)
    - [Remove Chunk Hashing](#remove-chunk-hashing)
    - [Add devtools](#add-devtools)
    - [Add Resolve for Typescript extensions](#add-resolve-for-typescript-extensions)
    - [Add Build Script in package.json](#add-build-script-in-packagejson)
    - [Create TypeDefinition Bundle](#create-typedefinition-bundle)
    - [🔧Add Build Script in package.json](#%F0%9F%94%A7add-build-script-in-packagejson)
    - [🍺Create TypeDefinition Bundle](#%F0%9F%8D%BAcreate-typedefinition-bundle)
    - [Step 1- add fix for type definition bundler webpack plugin](#step-1--add-fix-for-type-definition-bundler-webpack-plugin)
    - [Step 2- add DeclarationBundlerPlugin to webpack.config.js](#step-2--add-declarationbundlerplugin-to-webpackconfigjs)
    - [Step 3- Create Build](#step-3--create-build)
    - [Clean up dist folder before create bundle.](#clean-up-dist-folder-before-create-bundle)
    - [Copy your library `package.json` to your dist folder](#copy-your-library-packagejson-to-your-dist-folder)
    - [🌱Clean up dist folder before create bundle.](#%F0%9F%8C%B1clean-up-dist-folder-before-create-bundle)
    - [📠Copy your library `package.json` to your dist folder](#%F0%9F%93%A0copy-your-library-packagejson-to-your-dist-folder)
    - [Step 1- Create `src\package.json` file with below code.](#step-1--create-srcpackagejson-file-with-below-code)
    - [Step 3- Copy package.json after build](#step-3--copy-packagejson-after-build)
    - [Creating Typescript documentation of your project](#creating-typescript-documentation-of-your-project)
    - [📝Creating Typescript documentation of your project](#%F0%9F%93%9Dcreating-typescript-documentation-of-your-project)
    - [Step 1- Install typedoc](#step-1--install-typedoc)
    - [Step 2- Update webpack.config.js](#step-2--update-webpackconfigjs)

    ## Creating a Typescript Node.js Project
    ## 🌄Creating a Typescript Node.js Project

    Run below script to create default node.js project.

    @@ -126,7 +128,7 @@ create index file to export all of the public apis/modules.
    export * from './calculator'
    ```

    ## Creating Webpack.config.js file
    ## 🚿Creating Webpack.config.js file

    Run below script to go with interactive webpack cli

    @@ -202,7 +204,7 @@ In `webpack.config.js` add resolve

    resolve: { extensions: ['.ts'] },

    ## Add Build Script in package.json
    ## 🔧Add Build Script in package.json

    ```js
    "scripts": {
    @@ -220,7 +222,7 @@ Now if you run npm run build you should see the dist folder to be created with y

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/adc2c62508ba534026bed81fb9ff7d2a6d8c7f9b

    ## Create TypeDefinition Bundle
    ## 🍺Create TypeDefinition Bundle

    It is always a good idea to also create type definition bundle so that your library can be used by other projects and they can get the type intellisense.

    @@ -329,7 +331,7 @@ Dist folder with `mylib.js` and `@types`

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/adc2c62508ba534026bed81fb9ff7d2a6d8c7f9b

    ## Clean up dist folder before create bundle.
    ## 🌱Clean up dist folder before create bundle.

    Add below code in `webpack.config.js`

    @@ -350,7 +352,7 @@ Now add some garbage files in dist folder and run

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/5f77ec0af2cf89b1e7508d14697d562a8202becb

    ## Copy your library `package.json` to your dist folder
    ## 📠Copy your library `package.json` to your dist folder

    You should copy package.json to dist folder so that you can publish your dist folder to `npm.org`

    @@ -388,12 +390,36 @@ plugins: [

    ```

    Now if you run the `npm run build` you should see package.json file in your dist folder
    Now if you run the `npm run build` you should see package.json file in your dist folder

    ![adding package.json in dist folder image](https://gist.githubusercontent.com/rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5/raw/313d4ba58d6ae88fc6606e549cebb16d03384eb1/z_copy%2520package.png)
    <a href="#">Go to Top</a>

    Commit Link : https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/fc1a1cd7c240f63877957083cbe84fce72db975e

    ## 📝Creating Typescript documentation of your project

    ## Creating Typescript documentation of your project
    Read my article for detail insight https://rupeshtiwari.com/how-to-create-documentation-of-any-typescript-project/

    ### Step 1- Install typedoc

    Run below script to install typedoc and webpack plugin for typedoc

    npm i -D typedoc-webpack-plugin typedoc

    ### Step 2- Update webpack.config.js

    Add below code in your `webpack.config.js` file.

    ```js
    const TypedocWebpackPlugin = require('typedoc-webpack-plugin')

    plugins: [
    ...
    new TypedocWebpackPlugin({
    out: 'docs'
    })
    ],
    ```

    Now if you run the `npm run build` you should see docs folder created you can browse via any browser and see them. 👌
    Binary file added z_docsfor typescript.PNG
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    Binary file added z_docshtml.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  3. rtiwari revised this gist May 30, 2019. 1 changed file with 13 additions and 9 deletions.
    22 changes: 13 additions & 9 deletions Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,20 +3,20 @@
    Welcome to step by step hands-on guide to setup webpack in your upcoming typescript project.
    Please follow the steps and you should be able to create your own webpack project. Please download the source code [from github.](https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript)

    ## Steps to Setup Webpack in Typescript Project
    You will learn below things:

    1. Create a Typescript node.js project.
    2. Install Dependencies with webpack & typescripts.
    3. Use Webpack CLI to crate `webpack.config.js` file and modify webpack.config.js based on our need.
    4. Add Build script in package.json At this point you should see the dist folder created with bundle file.
    5. Create TypeDefinition Bundle.
    6. Clean up dist folder before create bundle.
    7. Copy your library `package.json` to your dist folder.
    1. ✅Create a Typescript node.js project.
    2. ✅Install Dependencies with webpack & typescripts.
    3. ✅Use Webpack CLI to crate `webpack.config.js` file and modify webpack.config.js based on our need.
    4. ✅Add Build script in package.json At this point you should see the dist folder created with bundle file.
    5. ✅Create TypeDefinition Bundle.
    6. ✅Clean up dist folder before create bundle.
    7. ✅Copy your library `package.json` to your dist folder.
    8. ✅Creating Typescript documentation of your project

    **Table of Contents**

    - [Setting up Webpack for any Typescript project from Scratch](#setting-up-webpack-for-any-typescript-project-from-scratch)
    - [Steps to Setup Webpack in Typescript Project](#steps-to-setup-webpack-in-typescript-project)
    - [Creating a Typescript Node.js Project](#creating-a-typescript-nodejs-project)
    - [Step 1- Install Dependencies](#step-1--install-dependencies)
    - [Step 2- Add TSConfig File ( required for typescript project)](#step-2--add-tsconfig-file--required-for-typescript-project)
    @@ -37,6 +37,7 @@ Please follow the steps and you should be able to create your own webpack projec
    - [Copy your library `package.json` to your dist folder](#copy-your-library-packagejson-to-your-dist-folder)
    - [Step 1- Create `src\package.json` file with below code.](#step-1--create-srcpackagejson-file-with-below-code)
    - [Step 3- Copy package.json after build](#step-3--copy-packagejson-after-build)
    - [Creating Typescript documentation of your project](#creating-typescript-documentation-of-your-project)

    ## Creating a Typescript Node.js Project

    @@ -393,3 +394,6 @@ Now if you run the `npm run build` you should see package.json file in your dist
    <a href="#">Go to Top</a>

    Commit Link : https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/fc1a1cd7c240f63877957083cbe84fce72db975e


    ## Creating Typescript documentation of your project
  4. rtiwari revised this gist May 30, 2019. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -387,6 +387,9 @@ plugins: [

    ```

    Now if you run the `npm run build` you should see package.json file in your dist folder

    ![adding package.json in dist folder image](https://gist.githubusercontent.com/rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5/raw/313d4ba58d6ae88fc6606e549cebb16d03384eb1/z_copy%2520package.png)
    <a href="#">Go to Top</a>

    Commit Link : https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/fc1a1cd7c240f63877957083cbe84fce72db975e
  5. rtiwari revised this gist May 30, 2019. 2 changed files with 23 additions and 6 deletions.
    29 changes: 23 additions & 6 deletions Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -215,7 +215,7 @@ Now if you run npm run build you should see the dist folder to be created with y

    ![Build Output in Dist Folder](https://gist.githubusercontent.com/rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5/raw/beea898180eaa04e28268155ac89661331d6bc44/z_build_output.PNG)

    <a>Go to Top</a>
    <a href="#">Go to Top</a>

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/adc2c62508ba534026bed81fb9ff7d2a6d8c7f9b

    @@ -324,7 +324,7 @@ Dist folder with `mylib.js` and `@types`

    ![DIST with mylib and types image](https://gist.githubusercontent.com/rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5/raw/3910cb02805c5530ba828a5662ae2355d2055d43/z_dist%2520with%2520typedefinition%2520bundle.PNG)

    <a>Go to Top</a>
    <a href="#">Go to Top</a>

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/adc2c62508ba534026bed81fb9ff7d2a6d8c7f9b

    @@ -345,15 +345,16 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    Now add some garbage files in dist folder and run
    `npm run build` you should see your garbage files are deleted and only types and lib files are there.

    <a>Go to Top</a>
    <a href="#">Go to Top</a>

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/5f77ec0af2cf89b1e7508d14697d562a8202becb


    ## Copy your library `package.json` to your dist folder
    You should copy package.json to dist folder so that you can publish your dist folder to `npm.org `

    You should copy package.json to dist folder so that you can publish your dist folder to `npm.org`

    ### Step 1- Create `src\package.json` file with below code.

    ```js
    {
    "name": "my-sample-typescript",
    @@ -364,12 +365,28 @@ You should copy package.json to dist folder so that you can publish your dist fo
    }

    ```
    ### Step 3- Copy package.json after build

    ### Step 3- Copy package.json after build

    Add below webpack plugin to copy package.json file to dist.

    ```js

    const CopyWebpackPlugin = require('copy-webpack-plugin')


    plugins: [
    ...
    new CopyWebpackPlugin([
    {
    from: './src/package.json',
    to: '../dist/package.json'
    }
    ])
    ],

    ```

    <a href="#">Go to Top</a>

    Commit Link : https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/fc1a1cd7c240f63877957083cbe84fce72db975e
    0 copy package.png → z_copy package.png
    View file
    File renamed without changes
  6. rtiwari revised this gist May 30, 2019. 2 changed files with 56 additions and 0 deletions.
    56 changes: 56 additions & 0 deletions Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -10,6 +10,8 @@ Please follow the steps and you should be able to create your own webpack projec
    3. Use Webpack CLI to crate `webpack.config.js` file and modify webpack.config.js based on our need.
    4. Add Build script in package.json At this point you should see the dist folder created with bundle file.
    5. Create TypeDefinition Bundle.
    6. Clean up dist folder before create bundle.
    7. Copy your library `package.json` to your dist folder.

    **Table of Contents**

    @@ -31,6 +33,10 @@ Please follow the steps and you should be able to create your own webpack projec
    - [Step 1- add fix for type definition bundler webpack plugin](#step-1--add-fix-for-type-definition-bundler-webpack-plugin)
    - [Step 2- add DeclarationBundlerPlugin to webpack.config.js](#step-2--add-declarationbundlerplugin-to-webpackconfigjs)
    - [Step 3- Create Build](#step-3--create-build)
    - [Clean up dist folder before create bundle.](#clean-up-dist-folder-before-create-bundle)
    - [Copy your library `package.json` to your dist folder](#copy-your-library-packagejson-to-your-dist-folder)
    - [Step 1- Create `src\package.json` file with below code.](#step-1--create-srcpackagejson-file-with-below-code)
    - [Step 3- Copy package.json after build](#step-3--copy-packagejson-after-build)

    ## Creating a Typescript Node.js Project

    @@ -317,3 +323,53 @@ It will crate dist folder with library bundle and type definition bundle as well
    Dist folder with `mylib.js` and `@types`

    ![DIST with mylib and types image](https://gist.githubusercontent.com/rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5/raw/3910cb02805c5530ba828a5662ae2355d2055d43/z_dist%2520with%2520typedefinition%2520bundle.PNG)

    <a>Go to Top</a>

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/adc2c62508ba534026bed81fb9ff7d2a6d8c7f9b

    ## Clean up dist folder before create bundle.

    Add below code in `webpack.config.js`

    ```js
    const { CleanWebpackPlugin } = require('clean-webpack-plugin')

    plugins: [
    new CleanWebpackPlugin(),
    ...
    ],

    ```

    Now add some garbage files in dist folder and run
    `npm run build` you should see your garbage files are deleted and only types and lib files are there.

    <a>Go to Top</a>

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/5f77ec0af2cf89b1e7508d14697d562a8202becb


    ## Copy your library `package.json` to your dist folder
    You should copy package.json to dist folder so that you can publish your dist folder to `npm.org `

    ### Step 1- Create `src\package.json` file with below code.
    ```js
    {
    "name": "my-sample-typescript",
    "version": "1.0.0",
    "description": "My Library",
    "author": "",
    "license": "ISC"
    }

    ```
    ### Step 3- Copy package.json after build

    Add below webpack plugin to copy package.json file to dist.

    ```js

    ```


    Binary file added copy package.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  7. rtiwari revised this gist May 30, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # Setting up Webpack for any Typescript project from Scratch

    Welcome to the hands-on guide to setup webpack in your upcoming typescript project.
    Welcome to step by step hands-on guide to setup webpack in your upcoming typescript project.
    Please follow the steps and you should be able to create your own webpack project. Please download the source code [from github.](https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript)

    ## Steps to Setup Webpack in Typescript Project
  8. rtiwari revised this gist May 30, 2019. 1 changed file with 22 additions and 1 deletion.
    23 changes: 22 additions & 1 deletion Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,6 +11,27 @@ Please follow the steps and you should be able to create your own webpack projec
    4. Add Build script in package.json At this point you should see the dist folder created with bundle file.
    5. Create TypeDefinition Bundle.

    **Table of Contents**

    - [Setting up Webpack for any Typescript project from Scratch](#setting-up-webpack-for-any-typescript-project-from-scratch)
    - [Steps to Setup Webpack in Typescript Project](#steps-to-setup-webpack-in-typescript-project)
    - [Creating a Typescript Node.js Project](#creating-a-typescript-nodejs-project)
    - [Step 1- Install Dependencies](#step-1--install-dependencies)
    - [Step 2- Add TSConfig File ( required for typescript project)](#step-2--add-tsconfig-file--required-for-typescript-project)
    - [Step 3- Create Calculator.ts file](#step-3--create-calculatorts-file)
    - [Step 4- Create Index.ts File](#step-4--create-indexts-file)
    - [Creating Webpack.config.js file](#creating-webpackconfigjs-file)
    - [Adding Entry Point in Webpack](#adding-entry-point-in-webpack)
    - [Adding Typescript Loader](#adding-typescript-loader)
    - [Remove Chunk Hashing](#remove-chunk-hashing)
    - [Add devtools](#add-devtools)
    - [Add Resolve for Typescript extensions](#add-resolve-for-typescript-extensions)
    - [Add Build Script in package.json](#add-build-script-in-packagejson)
    - [Create TypeDefinition Bundle](#create-typedefinition-bundle)
    - [Step 1- add fix for type definition bundler webpack plugin](#step-1--add-fix-for-type-definition-bundler-webpack-plugin)
    - [Step 2- add DeclarationBundlerPlugin to webpack.config.js](#step-2--add-declarationbundlerplugin-to-webpackconfigjs)
    - [Step 3- Create Build](#step-3--create-build)

    ## Creating a Typescript Node.js Project

    Run below script to create default node.js project.
    @@ -295,4 +316,4 @@ It will crate dist folder with library bundle and type definition bundle as well

    Dist folder with `mylib.js` and `@types`

    ![DIST with mylib and types image]()
    ![DIST with mylib and types image](https://gist.githubusercontent.com/rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5/raw/3910cb02805c5530ba828a5662ae2355d2055d43/z_dist%2520with%2520typedefinition%2520bundle.PNG)
  9. rtiwari renamed this gist May 30, 2019. 1 changed file with 0 additions and 0 deletions.
    0 dist with typedefinition bundle.PNG → z_dist with typedefinition bundle.PNG
    View file
    File renamed without changes
  10. rtiwari revised this gist May 30, 2019. 2 changed files with 103 additions and 2 deletions.
    105 changes: 103 additions & 2 deletions Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -188,10 +188,111 @@ Now if you run npm run build you should see the dist folder to be created with y

    ![Build Output in Dist Folder](https://gist.githubusercontent.com/rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5/raw/beea898180eaa04e28268155ac89661331d6bc44/z_build_output.PNG)

    <a>Go to Top</a>

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/adc2c62508ba534026bed81fb9ff7d2a6d8c7f9b

    ## Create TypeDefinition Bundle

    It is always a good idea to also create type definition bundle so that your library can be used by other projects and they can get the type intellisense.

    <a>Go to Top</a>
    ### Step 1- add fix for type definition bundler webpack plugin

    Add below file `declaration-bundler-webpack-plugin.fix.js`

    ```js
    const DeclarationBundlerPlugin = require('declaration-bundler-webpack-plugin')

    let buggyFunc = DeclarationBundlerPlugin.prototype.generateCombinedDeclaration
    DeclarationBundlerPlugin.prototype.generateCombinedDeclaration = function(
    declarationFiles
    ) {
    for (var fileName in declarationFiles) {
    let declarationFile = declarationFiles[fileName]
    declarationFile._value =
    declarationFile._value || declarationFile.source()
    }
    return buggyFunc.call(this, declarationFiles)
    }

    module.exports = DeclarationBundlerPlugin
    ```

    ### Step 2- add DeclarationBundlerPlugin to webpack.config.js

    ```js
    const DeclarationBundlerPlugin = require('./declaration-bundler-webpack-plugin.fix')

    ...
    plugins: [
    new UglifyJSPlugin(),
    new DeclarationBundlerPlugin({
    moduleName: '"mylib"',
    out: '@types/index.d.ts'
    })
    ],
    ...
    ```

    Complete webpack.config.js file looks like below:

    ```js
    const webpack = require('webpack')
    const path = require('path')
    const DeclarationBundlerPlugin = require('./declaration-bundler-webpack-plugin.fix')
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

    module.exports = {
    entry: {
    mylib: path.resolve(__dirname, 'src/index.ts')
    },
    module: {
    rules: [
    {
    test: /\.ts$/,
    exclude: [/node_modules/],
    loader: 'ts-loader'
    }
    ]
    },
    resolve: { extensions: ['.ts'] },
    output: {
    chunkFilename: '[name].js',
    filename: '[name].js'
    },

    mode: 'development',
    plugins: [
    new UglifyJSPlugin(),
    new DeclarationBundlerPlugin({
    moduleName: '"mylib"',
    out: '@types/index.d.ts'
    })
    ],
    devtool: 'source-map',
    optimization: {
    splitChunks: {
    cacheGroups: {
    vendors: {
    priority: -10,
    test: /[\\/]node_modules[\\/]/
    }
    },

    chunks: 'async',
    minChunks: 1,
    minSize: 30000,
    name: true
    }
    }
    }
    ```

    ### Step 3- Create Build

    Now run `npm run build`
    It will crate dist folder with library bundle and type definition bundle as well.

    Dist folder with `mylib.js` and `@types`

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/adc2c62508ba534026bed81fb9ff7d2a6d8c7f9b
    ![DIST with mylib and types image]()
    Binary file added dist with typedefinition bundle.PNG
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  11. rtiwari revised this gist May 30, 2019. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    # 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 should be able to create your own webpack project.
    Please follow the steps and you should be able to create your own webpack project. Please download the source code [from github.](https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript)

    ## Steps to Setup Webpack in Typescript Project

    @@ -191,3 +191,7 @@ Now if you run npm run build you should see the dist folder to be created with y
    ## Create TypeDefinition Bundle

    It is always a good idea to also create type definition bundle so that your library can be used by other projects and they can get the type intellisense.

    <a>Go to Top</a>

    Commit Link https://github.com/rupeshtiwari/setup-webpack-from-scratch-for-typescript/commit/adc2c62508ba534026bed81fb9ff7d2a6d8c7f9b
  12. rtiwari revised this gist May 30, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -186,7 +186,7 @@ Now if you run npm run build you should see the dist folder to be created with y

    **Build Output in Dist Folder:**

    ![Build Output in Dist Folder]()
    ![Build Output in Dist Folder](https://gist.githubusercontent.com/rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5/raw/beea898180eaa04e28268155ac89661331d6bc44/z_build_output.PNG)

    ## Create TypeDefinition Bundle

  13. rtiwari revised this gist May 30, 2019. 2 changed files with 126 additions and 10 deletions.
    136 changes: 126 additions & 10 deletions Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,23 @@
    Setting up Webpack for any Typescript project from Scratch
    ===========================================================
    # 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.
    Please follow the steps and you should be able to create your own webpack project.

    ## Steps to Setup Webpack in Typescript Project

    1. Create a Typescript node.js project.
    2. Install Dependencies with webpack & typescripts.
    3. Use Webpack CLI to crate `webpack.config.js` file.
    3. Use Webpack CLI to crate `webpack.config.js` file and modify webpack.config.js based on our need.
    4. Add Build script in package.json At this point you should see the dist folder created with bundle file.
    5. Create TypeDefinition Bundle.

    ## Create a Node.js Typescript Project
    ## Creating a Typescript Node.js Project

    Run below script to create default node.js project.

    npm init --y

    ## Install Dependencies
    ### Step 1- Install Dependencies

    Run below script to get all of the dependencies

    @@ -50,7 +51,54 @@ package.json looks like this:

    ```

    ## Using Webpack CLI
    ### Step 2- Add TSConfig File ( required for typescript project)

    Add tsconfig file at the root of the project
    `tsconfig.json`

    ```js
    {
    "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "declaration": true,
    "moduleResolution": "node",
    "outDir": "./dist",
    "rootDir": "."
    },
    "include": ["src"]
    }
    ```

    ### Step 3- Create Calculator.ts file

    `src\calculator.ts`

    ```ts
    export class Calculator {
    static version = '1'
    constructor() {}
    add(a: number, b: number) {
    console.log(`version ${Calculator.version}`)
    return a + b
    }
    }
    ```

    ### Step 4- Create Index.ts File

    create index file to export all of the public apis/modules.

    `src\index.ts`

    ```ts
    export * from './calculator'
    ```

    ## Creating Webpack.config.js file

    Run below script to go with interactive webpack cli

    @@ -66,12 +114,80 @@ See my answers to below questions.
    ? Will you be using ES2015? No
    ? Will you use one of the below CSS solutions? No
    ```

    ![questions](https://gist.githubusercontent.com/rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5/raw/2113b81710d56430ab93549dda834d4d0f269f12/z_interactive-webpack-cli.PNG)

    ### Will you be using ES2015?
    **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?
    **Will you use one of the below CSS solutions?**

    Answer: No, since My project is purely typescript library project I don't have web project also I don't have html css. Therefore, I selected no for CSS question.

    ### Adding Entry Point in Webpack

    ```ts
    entry: {
    "mylib": path.resolve(__dirname, 'src/index.ts')
    },
    ```

    ### Adding Typescript Loader

    Add below rule in your `webpack.config.js` file.

    ```ts
    module: {
    rules: [
    {
    test: /\.ts$/,
    exclude: [/node_modules/],
    loader: 'ts-loader'
    }
    ]
    },
    ```

    ### Remove Chunk Hashing

    Normally webpack will create a bundle file with hashed file name. I personally don't like it therefore I am removing the hash from output. Feel free to skip this step.

    `webpack.config.js`

    ```ts
    output: {
    chunkFilename: '[name].js',
    filename: '[name].js'
    },
    ```

    ### Add devtools

    In `webpack.config.js` add devtool

    devtool:'source-map',

    ### Add Resolve for Typescript extensions

    In `webpack.config.js` add resolve

    resolve: { extensions: ['.ts'] },

    ## Add Build Script in package.json

    ```js
    "scripts": {
    "build": "webpack"
    },
    ```

    Now if you run npm run build you should see the dist folder to be created with your output file.

    **Build Output in Dist Folder:**

    ![Build Output in Dist Folder]()

    ## Create TypeDefinition Bundle

    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.
    It is always a good idea to also create type definition bundle so that your library can be used by other projects and they can get the type intellisense.
    Binary file added z_build_output.PNG
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  14. rtiwari revised this gist May 30, 2019. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -66,6 +66,7 @@ See my answers to below questions.
    ? Will you be using ES2015? No
    ? Will you use one of the below CSS solutions? No
    ```
    ![questions](https://gist.githubusercontent.com/rupeshtiwari/e7235addd5f52dc3e449672c4d8b88d5/raw/2113b81710d56430ab93549dda834d4d0f269f12/z_interactive-webpack-cli.PNG)

    ### Will you be using ES2015?

  15. rtiwari revised this gist May 30, 2019. 1 changed file with 12 additions and 0 deletions.
    12 changes: 12 additions & 0 deletions Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,15 @@
    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

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

    ## Create a Node.js Typescript Project

    Run below script to create default node.js project.
  16. rtiwari revised this gist May 30, 2019. 1 changed file with 0 additions and 0 deletions.
    Binary file modified z_interactive-webpack-cli.PNG
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  17. rtiwari renamed this gist May 30, 2019. 1 changed file with 0 additions and 0 deletions.
    0 interactive-webpack-cli.PNG → z_interactive-webpack-cli.PNG
    View file
    File renamed without changes
  18. rtiwari revised this gist May 30, 2019. 2 changed files with 64 additions and 1 deletion.
    65 changes: 64 additions & 1 deletion Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,64 @@
    ## Create Project
    ## 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:

    ```js
    {
    "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.
    Binary file added interactive-webpack-cli.PNG
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  19. rupeshtiwari created this gist May 30, 2019.
    1 change: 1 addition & 0 deletions Setting up Webpack for Typescript Project From Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ## Create Project