Setting up Typescript and Webpack together
Tags: beginners, typescript, webpack, webdev
Published: 2022-10-11 20:17:51

Recently I became more interested and more engaged with Typescript and I'm moving some of my JS code to TS.

In one of my projects which was just a plugin, I had a huge JS file including the whole plugin code and I started to work on that.
So I started to split the code into multiple files and then I figured out that other people would appreciate it if I just move the code to TS so I started to add TS to the project.

First, I went through the code and made some functions based on the logic and as always I tried to make sure I apply some concepts of functional programming to make it easier for testing too.
Then I moved the functions into multiple files and export/import them. But I needed something to bundle them again back cause I needed to keep that format for my plugin.

## Webpack

I added it to my project:
```bash
yarn add webpack webpack-cli
```

also added a new script to my `package.json`:
```json
"build" : "webpack"
```
then I needed to configure it, so made a `webpack.config.js` file:
```js
const path = require('path');
const webpack = require('webpack');

module.exports = (env, argv) => ({
  mode: argv.mode === 'production' ? 'production' : 'development',

  entry: {
    code: './src/start.ts', // The entry point for plugin code. bundle file name is 'code'
  },

  resolve: { extensions: ['.jsx', '.js'] },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
  },

  plugins: [
    new webpack.DefinePlugin({
      global: {}, // Fix missing symbol error when running in developer VM
    }),
  ],
});

```

As I was testing it, I figured out some of the configurations to make sure my plugin is still working...
Awesome, after running `yarn build` I was getting my `code.js` file including all the codes from the functions that I exported from the other files.

## Typescript

Alright, I wanted to have TS to make sure I'm type-checking. I just started to rename my `.js` files to `.ts` and then I installed the required dependencies.
```bash
yarn add typescript
```

and I added `tsconfig.json` file to my project
```json
{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "es5",
    "outDir": "./dist/",
    "sourceMap": true,
    "declaration": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "allowJs": true,
    "moduleResolution": "node",
    "strict": true,
    "typeRoots": [
      "./node_modules/@types",
    ],
    "skipLibCheck": true,
  },
  "include": ["src/**/*.ts"]
}

```

now I was getting some weird errors, of course, cause I needed to hook my Typescript config with the webpack so I get a `js` file output after transpile-ing from TS and bundling the JS files

## Webpack and Typescript (ts-loader)
Installed new dependency needed
```bash
yarn add ts-loader
```
made the changes to my `webpack.config.js`

```js
const path = require('path');
const webpack = require('webpack');

module.exports = (env, argv) => ({
  mode: argv.mode === 'production' ? 'production' : 'development',

  entry: {
    code: './src/start.ts',
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },

  resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },

  plugins: [
    new webpack.DefinePlugin({
      global: {},
    }),
  ],
});

```

well, now when I ran `yarn build`, I had all my `.ts` files bundled into one JS file and had my type definitions beside it.
More, I added another script to watch the changes as I'm developing 

```json
"build:watch": "npm run build -- --watch"
```