Skip to content

Commit

Permalink
docs (typescript): add guide for webpack config TS
Browse files Browse the repository at this point in the history
Add a guide on how to use webpack configuration in Typescript  `webpack.config.ts`.
  • Loading branch information
deerawan committed Apr 25, 2022
1 parent 80e0084 commit 1abf384
Showing 1 changed file with 40 additions and 0 deletions.
40 changes: 40 additions & 0 deletions src/content/guides/typescript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ contributors:
- EugeneHlushko
- chenxsan
- snitin315
- deerawan
---

T> This guide stems from the [_Getting Started_](/guides/getting-started/) guide.
Expand Down Expand Up @@ -94,6 +95,45 @@ module.exports = {

This will direct webpack to _enter_ through `./index.ts`, _load_ all `.ts` and `.tsx` files through the `ts-loader`, and _output_ a `bundle.js` file in our current directory.

Regarding webpack configuration, instead of using Javascript for `webpack.config.js`, we could use the Typescript version `webpack.config.ts`. This is possible by installing some packages below.

```bash
npm install --save-dev ts-node @types/webpack
```

`ts-node` is required by webpack to load the configuration in Typescript. `@types/webpack` is an optional to give typing information for webpack config.

Let's see the Typescript version of webpack config file.

**webpack.config.ts**

```js
import * as path from 'path';
import { Configuration } from "webpack";

const config: Configuration = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};

export default config;
```

Now lets change the import of `lodash` in our `./index.ts` due to the fact that there is no default export present in `lodash` definitions.

**./index.ts**
Expand Down

0 comments on commit 1abf384

Please sign in to comment.