Webpack accepts configuration files written in multiple programming and data languages. The list of supported file extensions can be found in thenode-interpret package. Usingnode-interpret, webpack can handle many different types of configuration files.

TypeScript

To write the webpack configuration inTypeScript, you would first install the necessary dependencies, i.e., TypeScript and the relevant type definitions from theDefinitelyTyped project:

npminstall --save-dev typescript ts-node @types/node @types/webpack# and, if using webpack-dev-server < v4.7.0npminstall --save-dev @types/webpack-dev-server

and then proceed to write your configuration:

webpack.config.ts

import pathfrom'path';import webpackfrom'webpack';// in case you run into any typescript error when configuring `devServer`import'webpack-dev-server';const config: webpack.Configuration={  mode:'production',  entry:'./foo.js',  output:{    path: path.resolve(__dirname,'dist'),    filename:'foo.bundle.js',},};exportdefault config;

tsconfig.json

{"compilerOptions":{"allowSyntheticDefaultImports":true,"esModuleInterop":true}}

The above sample assumes version >= 2.7 or newer of TypeScript is used with the newesModuleInterop andallowSyntheticDefaultImports compiler options in yourtsconfig.json file.

Note that you'll also need to check yourtsconfig.json file. If themodule incompilerOptions intsconfig.json iscommonjs, the setting is complete, else webpack will fail with an error. This occurs becausets-node does not support any module syntax other thancommonjs.

There are three solutions to this issue:

• Modifytsconfig.json.
• Modifytsconfig.json and add settings forts-node.
• Installtsconfig-paths.

Thefirst option is to open yourtsconfig.json file and look forcompilerOptions. Settarget to"ES5" andmodule to"CommonJS" (or completely remove themodule option).

Thesecond option is to add settings for ts-node:

You can keep"module": "ESNext" fortsc, and if you use webpack, or another build tool, set an override for ts-node.ts-node config

{"compilerOptions":{"module":"ESNext",},"ts-node":{"compilerOptions":{"module":"CommonJS"}}}

Thethird option is to install thetsconfig-paths package:

npminstall --save-dev tsconfig-paths

And create a separate TypeScript configuration specifically for your webpack configs:

tsconfig-for-webpack-config.json

{"compilerOptions":{"module":"commonjs","target":"es5","esModuleInterop":true}}

{"scripts":{"build":"cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"}}

We had been getting reports thatTS_NODE_PROJECT might not work with"TS_NODE_PROJECT" unrecognized command error. Therefore running it withcross-env seems to fix the issue, for more infosee this issue.

CoffeeScript

Similarly, to useCoffeeScript, you would first install the necessary dependencies:

npminstall --save-dev coffeescript

and then proceed to write your configuration:

webpack.config.coffee

HtmlWebpackPlugin = require('html-webpack-plugin')webpack = require('webpack')path = require('path')config =  mode: 'production'  entry: './path/to/my/entry/file.js'  output:    path: path.resolve(__dirname, 'dist')    filename: 'my-first-webpack.bundle.js'  module: rules: [ {    test: /\.(js|jsx)$/    use: 'babel-loader'  } ]  plugins: [    new HtmlWebpackPlugin(template: './src/index.html')  ]module.exports = config

Babel and JSX

In the example below JSX (React JavaScript Markup) and Babel are used, to create a JSON configuration that webpack can understand.

Courtesy ofJason Miller

First, install the necessary dependencies:

npminstall --save-dev babel-register jsxobj babel-preset-es2015

.babelrc

{"presets":["es2015"]}

webpack.config.babel.js

import jsxobjfrom'jsxobj';// example of an imported pluginconstCustomPlugin=(config)=>({...config,  name:'custom-plugin',});exportdefault(<webpack target="web" watch mode="production"><entry path="src/index.js"/><resolve><alias{...{          react:'preact-compat','react-dom':'preact-compat',}}/></resolve><plugins><CustomPlugin foo="bar"/></plugins></webpack>);

13 Contributors