Configuration Languages | webpack

Webpack accepts configuration files written in multiple programming and data languages, so you can author your config in whichever format suits your project — JavaScript, TypeScript, CoffeeScript, or a plain data file like JSON5, YAML or TOML.
defineConfig is a helper exported from webpack that gives editors type-checking and autocomplete for your configuration without any extra type annotations. It is an identity function (a no-op at runtime that simply returns the config you pass in), so it works in plain JavaScript configs too.
It accepts every shape webpack-cli can load: a single configuration object, an array of configurations (multi-compiler), a function returning either of those, an array of such functions, or a Promise resolving to any of them.
To write the webpack configuration in TypeScript, you would first install the necessary dependencies, i.e., TypeScript and the relevant type definitions from the DefinitelyTyped project:
and then proceed to write your configuration:
The above sample assumes version >= 2.7 or newer of TypeScript is used with the new esModuleInterop and allowSyntheticDefaultImports compiler options in your tsconfig.json file.
We support configuration in both CommonJS and ESM format.
Starting with v22.18.0 Node.js supports built-in type stripping, so the additional settings described below are only required for older versions.
To enable the transformation of non erasable TypeScript syntax, which requires JavaScript code generation, such as enum declarations, parameter properties use the flag --experimental-transform-types.
If you are using an older version of Node.js that does not support the typescript format, or want to set module in compilerOptions in tsconfig.json to commonjs there are four solutions to this issue:
The first option is to open your tsconfig.json file and look for compilerOptions. Set target to "ES5" and module to "CommonJS" (or completely remove the module option).
The second option is to add settings for ts-node:
You can keep "module": "ESNext" for tsc, and if you use webpack, or another build tool, set an override for ts-node. ts-node config
The third option is moduleTypes, which overrides the module type for the config file alone. It is usually the better of the two overrides: unlike compilerOptions.module it also tells Node.js to load that file as CommonJS, which avoids the error you get when Node is asked to require() an ES module.
The fourth option is to create a separate TypeScript configuration specifically for your webpack configs:
tsconfig-for-webpack-config.json
TS_NODE_PROJECT is read by ts-node itself, so no additional package is needed to use it.
Then set the environment variable TS_NODE_PROJECT like so:
We had been getting reports that TS_NODE_PROJECT might not work with "TS_NODE_PROJECT" unrecognized command error. Therefore running it with cross-env seems to fix the issue, for more info see this issue.
Similarly, to use CoffeeScript, you would first install the necessary dependencies:
and then proceed to write your configuration:
webpack.config.coffee
In the example below JSX (React JavaScript Markup) and Babel are used, to create a JSON configuration that webpack can understand.
Courtesy of Jason Miller
First, install the necessary dependencies:
webpack.config.babel.js
If you are using Babel elsewhere and have modules set to false, you will have to either maintain two separate .babelrc files or use const jsxobj = require('jsxobj'); and module.exports instead of the new import and export syntax. This is because while Node does support many new ES6 features, they don't yet support ES6 module syntax.
When your configuration is purely static data — no functions, no process.env reads, no computed values — you can write it as a data file instead of JavaScript. webpack-cli parses the following extensions directly:
The parser is not bundled with webpack-cli — install the one your format needs as a dev dependency. If it is missing, webpack-cli stops and tells you exactly which package to install.
Point --config at the file, or name it so it is picked up as a default config (e.g. webpack.config.json5):
webpack.config.json5
These formats describe plain data only. When you need dynamic configuration — environment-based branches, plugin instances, or a function form — use a JavaScript or TypeScript config instead.
Copyright OpenJS Foundation and webpack contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy