Setting up Typescript and Webpack together

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:

yarn add webpack webpack-cli

also added a new script to my package.json:

"build" : "webpack"

then I needed to configure it, so made a webpack.config.js file:

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.

yarn add typescript

and I added tsconfig.json file to my project

{
  "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

yarn add ts-loader

made the changes to my webpack.config.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

"build:watch": "npm run build -- --watch"