Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs (typescript): add guide for webpack config TS #6105

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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 `ts-node`.

```bash
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably can have a link somewhere to link to https://webpack.js.org/configuration/configuration-languages/#typescript

which explains on using typescript for configuring webpack

npm install --save-dev ts-node
```

`ts-node` is required by webpack to load the configuration in Typescript.

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

**webpack.config.ts**

```ts
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