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
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
Leave a comment