Config Files of TypeScript and Webpack for Browsers

Here are the working settings of my current side project.

Config Files of TypeScript and Webpack for Browsers

I sometimes forget how to set up the config files for TypeScript for browsers. So, this article is for the future me. Here are the working settings of my current side project.

  • package.json: The mothership. It calls Webpack referring to webpack.config.js to wrap up source files into one file (or a few files) for distribution purposes.
  • webpack.config.js: The organizer. It calls the TypeScript loader, which refers to tsconfig.json to treat TypeScript files properly.
  • tsconfig.json: The lowest level config. It specifies the way the TypeScript loader should treat TypeScript files.