2022-09-01
2266
#typescript
Popoola Temitope
127686
Sep 1, 2022 ⋅ 8 min read

Using webpack with TypeScript

Popoola Temitope I'm a software developer and technical writer. I love learning about new technology and am always ready to share ideas with others.

Recent posts:

how to design apps with Apple Intelligence in mind

How to design apps with Apple Intelligence in mind

Apple Intelligence is here. What does it mean for frontend dev and UX? Explore the core features of the update, do’s and don’ts for designing with Apple Intelligence in mind, and reflect on the future of AI design.

Murat Yüksel
Jun 24, 2025 ⋅ 10 min read
How To Optimize Your Next.js App With After()

How to optimize your Next.js app with after()

Next.js’ after() is a new API that lets you run logic after your route has finished rendering, without blocking the client.

Temitope Oyedele
Jun 24, 2025 ⋅ 11 min read
JavaScript Loops Explained, And Best Practices

JavaScript loops explained, and best practices

JavaScript loops like for, for...of, and for...in are constructs that help run a piece of code multiple times.

Rahul Padalkar
Jun 23, 2025 ⋅ 8 min read
8 Reasons Your Next.js App Is Slow — And How To Fix Them

8 reasons your Next.js app is slow — and how to fix them

You don’t need to guess what’s wrong with your Next.js app. I’ve mapped out the 8 biggest performance traps and the fixes that actually work.

Chizaram Ken
Jun 20, 2025 ⋅ 16 min read
View all posts

6 Replies to "Using webpack with TypeScript"

  1. Thanks for a great article. I tried to follow this tutorial step-by-steps and discovered several issues with it:

    1. In “Setting up webpack and TypeScript” section you forgot to include ‘npm install webpack-dev-server’ command. You need to install this package either globally or locally, otherwise ‘develop’ script won’t work:

    “scripts”: {
    “develop”: “webpack-dev-server –mode development”,

    }

    2. Speaking about npm scripts, in “Package configuration” section there is an inconsistency in naming the script options: “start”: “webpack-dev-server –mode development”, should be changed for ‘develop’
    3. In ‘Package configuration’ section you need to fix the names of the inputs otherwise your app won’t work (compare to the input names in html template):

    function submitHandler(e: Event) {

    const num1 = document.querySelector(“input[name=’a’]”) as HTMLInputElement;
    const num2 = document.querySelector(“input[name=’b’]”) as HTMLInputElement;

    }

    4. In ‘Bundling CSS with `MiniCSSExtractPlugin` an actual npm command should be `npm install –save-dev mini-css-extract-plugin` (otherwise you are installing css minimiser plugin twice)

    By enabling this fixes I was able to complete your tutorial. I hope this helps and again thanks for your efforts!

  2. Hello everyone, for me to import css file in index.ts file just worked as follows: import ‘./main.css’ and not as your code: import styles “./index.css”. I hope this can help other people. and thanks for the tutorial.

    1. Thanks for catching that small typo! We appreciate your sharp eyes and attention to detail — it should be correct now.

Leave a Reply