Introduction to Webpack and Typescript configuration in React - Part 1


Ahamed Fazil Buhari
Senior Developer
Published On :   01 Apr 2018
Visit Count
Today :  1    Total :   1151



Hi, in this article we will see how to compile your simple React application using webpack and we are using Typescript here; I already wrote an article about Advantages of using Typescript. I consider you already setup your react environment by installing all dependencies like npm, node. Let’s go directly into react application where we need to configure Webpack.

I would like to give little introduction on Webpack before going further,

What is Webpack? -> They bundle all your files (app.js, index.js….) and make it single file so it will very useful for you to refer single .js file – (Webpack is a module bundler).

App.js + index.js + <any>.js = bundle.js

Main.css + header.css + page.css = bundle.css

Not only it helps to create bundle, it greatly helps to manage and compile your code.

Webpack consists for 4 major concepts


image


Entry Point: Webpack needs entry point to know where should it starts.

Sample value:

entry: "./src/index.tsx",

Loaders: This helps to process javascript, typescript, css, scss or whatever files you used in your application. Please refer this link and use loader accordingly for processing your files, still there lot many loaders available, google around.

Sample value:

{

test: /\.tsx?$/,

exclude: /node_modules/,

loader: "awesome-typescript-loader"

}

Plugins: It works same as loader which processes the files but it also helps to minification and optimization

Sample value:

new HtmlWebpackPlugin({

template: "src/index.html",

favicon: "src/favicon.ico"

}),

Output: After processing all your files it will give single output (commonly called as bundle). It could be one or many outputs based on entry points.

Sample value:

output: {

filename: "bundle.js",

path: __dirname + "/dist"

},

I think this is enough for theoretical explanation on webpack. Let’s get into real code

I installed the following package globally,

npm install -g typescript

Installing webpack, webpack dev dependency packages and typescript compiler

I just installed webpack package as dev dependency locally as well and I find 3.11.0 version is more reliable for me, the version may differ by the time you are reading this article.

npm install --save-dev webpack@3.11.0

webpack-dev-server should be installed as dev dependency, since it will be used for development purpose and provides live loading. Also install webpack-cli , webpack-merge and extract-text-webpack-plugin for configuration support.

npm install --save-dev webpack-dev-server@2.3.0 webpack-cli webpack-merge extract-text-webpack-plugin typescript @types/react @types/react-dom rimraf

Installing Loaders in dev dependecies

npm install --save-dev style-loader source-map-loader awesome-typescript-loader file-loader

To include those entire 4 major concepts (which we talked above) in your application, we need to have a config file for that. Please keep in mind; if you name your config file other than webpack.config then we need to specify the name of your config file on command line while running.

To simply this, I created webpack.config file at root folder.

This webpack.config.js file exports javascript object, and you can find entry, output, loaders and plugins inside this file.

We can use module.export which is node JS export syntax to export webpack JavaScript objects, so the syntax will be as follows,

module.export = {

entry: <<path to entry file>> ,

output:<<give the path to save and the file name>>,

module: <<import files in your code and tell which loader we need to use for different file format(.js, .ts, .css, .jpg and so on)>>

plugin: <<applied for any transformation you need before it is bundled>>

}

In the next article we will see how to configure in our real time application. Thank you for reading.

Happy Coding

Ahamed

Categories