TheLazy.Dev
Portfolio GitHub

Blog

webpack |firstpost |tutorial |typescript

First steps in initialising Webpack and Typescript

iwi4a_24

Ivelin

Posted on March 15, 2022

First steps in initialising Webpack and Typescript

Part 1 - Very basic setup

Build your own config for Webpack from the ground up. This post will hold your hand for the first 4 steps and you will see how to take it from there. As of Webpack 4, a config file is not needed so let's see how we can create a build.

In your terminal, navigate to a folder you want to work in and type the following:

yarn init -y

yarn add webpack webpack-cli --dev

In the root level create a folder /dist with a file index.html inside and another folder /src in the root level and add a index.js file inside it. Your file structure should look like the following:

|- package.json
|- package-lock.json
|- /dist
    |- index.html
|- /src
    |- index.js```
Enter fullscreen mode Exit fullscreen mode

In your package.json, replace "main": "index.js", with "private": true to prevent it from publishing your package.

Add basic HTML5 boiler plate to your dist/index.html file, it should look like this:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack</title>
    <script src="main.js"></script>
  </head>
  <body></body>
</html>
Enter fullscreen mode Exit fullscreen mode

As an example, add a console log to your ./src/index.js



const greetings = "Hello World";
console.log(greetings);
Enter fullscreen mode Exit fullscreen mode

This is all that is needed for a very basic build. Now run yarn webpack and you can see a new, compiled file main.js to appear in ./dist. The content of the compiled file should look like the following:



console.log("Hello World");
Enter fullscreen mode Exit fullscreen mode

Part 2 - Adding a custom config file

In the root level, add a file called webpack-config.js and then add the following configs:



import path from "path";

export default {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
};
Enter fullscreen mode Exit fullscreen mode

Part 3 - Add script command

In your package.json, add the following command to the existing scripts (you should have test by default)



"build": "webpack --mode development"
Enter fullscreen mode Exit fullscreen mode

Next time you need to run a build, you can use yarn run build instead of typing it all in the terminal.

Part 4 - Add TypeScript

Install dependancies



yarn add typescript ts-loader ts-node --dev
Enter fullscreen mode Exit fullscreen mode

Add a new file tsconfig.json to the root level of the project and add the following configs:



{
    "compilerOptions": {
      "target": "ESNEXT",
      "module": "commonjs",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "resolveJsonModule": true
    }
  }
Enter fullscreen mode Exit fullscreen mode

Then open your webpack-config and add the following below output



module: {
  rules: [
    {
      test: /\.tsx?$/,
      use: "ts-loader",
      exclude: /node_modules/,
    },
  ],
},
resolve: {
  extensions: [".tsx", ".ts", ".js"],
},
Enter fullscreen mode Exit fullscreen mode

Replace the entry file extension in your webpack-config to:



entry: path.resolve(__dirname, "src/index.ts")
Enter fullscreen mode Exit fullscreen mode

Add a new file to ./src named index.ts. You can now start to use this instead.

This is all that is needed to create an initial configs for webpack and add support for typescript. If you have any questions, please leave a comment and I will get back to you. All the best at initialising webpack!

💖 💪 🙅 🚩
iwi4a_24
Ivelin

Posted on March 15, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

First steps in initialising Webpack and Typescript
webpack First steps in initialising Webpack and Typescript

March 15, 2022