Build a development environment with typescript and WebPack

Project initialization

$ yarn init -y
Copy the code

In this document, the yarn command is used. If the yarn command is not installed, you can use NPM to install the yarn command

$ npm i -g yarn
Copy the code

Install dependencies

Copy the above content into the projectpackage.jsonFile, execute the installation command

$ yarn install 
Copy the code

Project configuration

Initialize the tsconfig. Json

$ tsc --init
Copy the code

If TSC is not a normal command error, add NPX in front of the command and then execute

After successful execution, modify tsconfig by writing the following

See the official documentation for more configuration options

webpack.config.js

Add it to the project root directorywebpack.config.js, the contents are as follows

See the official documentation for more configuration options

At this point, the configuration items of the project are almost all completed, so let’s start writing the code

Add the first TS file

Add in the project directorysrcFolder and create the first fileindex.ts, the contents are as follows

Run the project once you’re done to verify it

Project start

There are two ways to start the project. One is to directly enter Webpack serve in the terminal to start the project or use the YARN command to start the project. We use the second way. Configure the yarn startup script

Add the following code to package.json

  "scripts": {
    "start": "webpack serve"
  }
Copy the code

So now we can type it directly into the terminalyarn startTo start the project, you will see the following prompt after execution

The project started smoothly and started a local service with port 8080, which we could access directly from the browser

http://localhost:8080/

Get the source clickhere