In this tutorial, we are going to learn how to set up a perfect typescript and webpack-dev-server environment. We are going to have a good webpack-dev-server example of how to set things up for code trials for your JavaScript projects.
Make sure your latest version of the node is installed in your machine. Let’s get started.
What are we going to do?
- Initialize Typescript.
- Change Module from commonjs to es2015 inside tsconfig.json
- Initialize new Node Project and create base HTML Files.
- Add & Configure WebPack.
- Setup WebPack Dev Environment.
Initialize Typescript and Create New Node Project
Create a folder for your project and open terminal and press tsc --init. It will create a new file inside your folder called tsconfig.json. It is basically a typescript configuration.
In this file, we are going to change some of the lines which will help us enable ES6 on our project which will enable us to use arrow functions like this a => () return 0;. If you don’t know about it you might want to take a crash course of ECMAScript 6 on YouTube.
So, open your tsconfig.json and under “compilerOptions”, you will find uncommented line ‘target’ & ‘module’ options. We need to change those,
"target": "es5"to"target": "es6""module": "commonjs"to"common": "es2015"
Save it and move to the next step.
Creating a New Node Project
Type npm init into the terminal. It will ask you to create a project name and some of the details below as you go on.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
package name: (webpack-tutorial) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: Shashank Bhattarai license: (ISC) About to write to D:\wpack\package.json: { "name": "wpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Shashank Bhattarai", "license": "ISC" } Is this OK? (yes) yes |
Once your npm project is ready, we have to install a webpack, webpack-cli, and typescript to save in our project as a dev dependency.
In your terminal and type npm install webpack webpack-cli typescript -D to install these inside your project dev dependencies.
Since we already have our dependencies installed, now we can start creating our source files. Create a new folder in the project root and keep any name you like. I would like to call it src/. Create a new file under it as index.ts which we are going to use it to write codes. For now, you can just write console.log('Hello world') to know later that the server works.
Now, as we need another folder where we can place our compiled javascript and HTML files to serve. So, create a new folder called dist in the project root. Create a HTML file and name it as index.html and make basic markup inside it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Typescript & Webpack Tutorial</title> </head> <body> <!-- Paste your html codes here --> <script src="dist/compiled.js"></script> </body> </html> |
Configuring WebPack Dev Environment
In this step, we have to configure webpack for our project. Create a new file under the root directory as webpack.config.js and paste these codes below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
const path = require('path'); module.exports = { mode: 'development', devtool: 'eval-source-map', entry: './src/index.ts', module: { rules: [ { test: /\.ts$/, include: [path.resolve(__dirname, 'src')], use: 'ts-loader' } ] }, devServer: { contentBase: path.resolve(__dirname, 'dist') }, resolve: { extensions: ['.ts', '.js'] }, output: { publicPath: "dist", filename: 'compiled.js', path: path.resolve(__dirname, 'dist') } } |
Now go to package.json and under the script section copy these codes to make our project use the webpack configuration.
|
1 2 3 4 5 |
"scripts": { "serve": "webpack-dev-server", "build": "webpack", "test": "echo \"Error: no test specified\" && exit 1" }, |
Finally, do a npm run build in your terminal and it will compile all your .ts files into the javascript which will be under /dist folder.
Once everything is compiled. Use npm run serve and it will host on http://localhost:8080 in your terminal. If you have any problem then, you can use my typescript + webpack dev server ready project from here.
Leave a Reply