Configuring WebPack for Typescript with import

Question

The tutorial of webpack configuration for typescript shows something like this:

const path = require('path');

module.exports = { ... }

Would it not be better to use it as es module and configure it with eg imports. Or is there a reason why it is configured like above? I cant find any example where it is configured like this:

import webpack from "webpack";
import path from "path";

export default () => { ... }

Answer 1

TypeScript and the newer ES standard are supersets of normal JavaScript. Writing config files using widely supported syntax and features makes it more widely available and acceptable without requiring additional setup.

TypeScript is a better practice in some ways, but you need to introduce extra dependencies and configuration to use it, in some organizations you don't even have that freedom. Similar to ES, Node.js didn't have native support for mjs until v12.

The good news is that Webpack also supports writing configurations in multiple languages including TypeScript, see https://webpack.js.org/configuration/configuration-languages/

It's also available to get features like IntelliSense by using TypeScript JSDoc annotations if for some reason you can't write TypeScript directly:

/** @type { import('webpack').Configuration } */
const config = {...};
module.exports = config;