How to replace Webpack with (almost) only TypeScript

Me setting up a new web app project with Webpack.
  • It works in modern browsers and only needs polyfills for older browsers.
  • The application code is based on modern JS/TypeScript with ES6 imports.
  • TypeScript’s watch mode may be used to continuously build the application bundle.
  • Source maps are supported.
Empty your package.json
  • Works with modern ES6/TypeScript projects, with little implications.
  • Wide browser compatibility (even Internet Explorer).
  • Loading of scripts is handled and optimized by the browser (async and defer are supported).
  • Production optimizations are progressive and don’t impact development.
  • Bundling is (almost) reduced to simple concatenation.
  • Bundling does not require configuration; simple shell scripts are sufficient and provide additional flexibility.
  • Dependencies must provide AMD/UMD builds. Most popular libraries do, though.
  • Multiple versions of dependencies are not supported.
  • CommonJS is not supported; you must use ES6 imports/exports. This is the way forward, anyway.
  • Non-JS imports (e.g. styles) are not supported.
  • Polyfills have to be managed manually.
  • No tree-shaking.
  • I’ve ignored bundling/minifying styles or images. I believe relying on bundlers to do everything is part of the problem. Instead you can use the SCSS CLI and image processing tools in your build script and speed it up with concurrently if necessary.

--

--

--

Information architect, software engineer, designer. From Hamburg, Germany

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Using Svelte with Lightning Web Components

Using the Node path.join function in Angular or Typescript

Introduction to React

Computer Vision JavaScript — OpenCv Js — How to use Opencv in JavaScript?

macMineable: unMineable for macOS [Updated]

Javascript Object Enum with Switch

What I learned from my backend Rails and frontend Javascript project

How to manage large Vue.js Components

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Morris Brodersen

Morris Brodersen

Information architect, software engineer, designer. From Hamburg, Germany

More from Medium

Building a ‘Pun Generator’ using React + TypeScript and a third party API

createRoot vs ReactDOM.render: A Tiny Mistake in React18 Official Documentation

REACT 18: EVERYTHING YOU NEED TO KNOW

Yarr (yet another react router) | Let’s get started | Great react routing library

Yarr is Yet Another React Library which helps to improve User Experience and application performance by giving data preloading and code preloading strategy with react routes.