{"id":94167,"date":"2019-07-30T07:00:10","date_gmt":"2019-07-30T04:00:10","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=94167"},"modified":"2019-07-29T15:10:48","modified_gmt":"2019-07-29T12:10:48","slug":"reactjs-webpack-tutorial","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html","title":{"rendered":"ReactJS Webpack Tutorial"},"content":{"rendered":"

In this article we will look at Reactjs<\/a> Webpack configuration for a Reactjs Application. Webpack is a hugely popular bundler. We will take a look at how we can configure it and set it up from scratch for an Application built with Reactjs. Specifically we will look at configuration of babel to transpile JSX code apart from other regular items like CSS and images.<\/p>\n

\n

Table Of Contents<\/h3>\n
\n
1. Introduction<\/a><\/dt>\n
2. Installing Webpack<\/a><\/dt>\n
3. Configuring Webpack<\/a><\/dt>\n
\n
\n
3.1 Entry Configuration<\/a><\/dt>\n
3.2 Output Configuration<\/a><\/dt>\n
3.3 Loader & Plugin Configuration<\/a><\/dt>\n<\/dl>\n<\/dd>\n
4. Optimizing Bundle Size<\/a><\/dt>\n
5. Configuring Dev Server<\/a><\/dt>\n
6. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n

<\/a>1. Introduction<\/h2>\n

So, let us get started without further delay. To start off I have created a very simple Reactjs application from scratch with just two components. We will use Webpack to bundle this application and learn the concepts that will help you with configuration for other larger applications.<\/p>\n

The folder structure of our basic React application is as follows. I will discuss each artifact and its contents after the image.<\/p>\n

\n
\"ReactJS
Folder Structure<\/figcaption><\/figure>\n<\/div>\n

dist folder<\/em><\/span><\/p>\n

This folder will contain our built artifacts ready to be served to the browser on request. The artifacts will include JavaScript, CSS files.<\/p>\n

js folder<\/em><\/span><\/p>\n

This folder contains our React code files. In our case here we have two App.js and Greeting.js. Our React app displays a simple greeting in a h1 tag.<\/p>\n

public folder<\/em><\/span><\/p>\n

This folder contains our Html pages. We have a single page index.html in our application.<\/p>\n

<\/a>2. Installing Webpack<\/h2>\n

To begin, we will install webpack and the webpack CLI locally and save them as dev dependencies of our project. We need to execute the following two commands one after the other to accomplish this.<\/p>\n

> npm install webpack --save-dev\n> npm install webpack-cli --save-dev\n<\/pre>\n
These commands will install webpack locally for our project and is the recommended way.<\/p>\n
Now, with version 4 onwards we do not need to do anything else to use webpack. Yes, no configuration files or settings file. Webpack uses intelligent defaults for all settings, so we can just run the following command at the root of our project.<\/p>\n
> webpack\n<\/pre>\n
But most projects need to handle more complex tasks like in our case we need to transpile JSX before it can execute in the browser. So, in the next section we look at how to configure webpack to perform those tasks using a configuration file.<\/p>\n
<\/a>3. Configuring ReactJS Webpack<\/h2>\n
We start off with a file called webpack.config.js. This is a plain ES6 module. One of the first settings we need to add is the mode setting with one of the values “development”, “production” or “none”. Each mode selects and sets defaults for respective environments. Where in the focus in development mode is non Hot Module Reloading and Source Maps to help debug our application in the browser. And in production mode the focus is on minimal bundle size to prime the application for performance.<\/p>\n
There are some settings that are shared across environments though thus we will derive our production settings from the development mode settings files as we will see further in the article.<\/p>\n
<\/a>3.1 Entry Configuration<\/h3>\n
In our simple react application we have two modules, namely App.js and Greeting.js which have the following code in them.<\/p>\n
App.js<\/em><\/span><\/p>\n
import React from 'react';\nimport ReactDom from 'react-dom';\nimport Greeting from '.\/Greeting';\nclass App extends React.Component {\n    render = () => {\n        return <Greeting greet=\"SiD\" \/>;\n    }\n};\nReactDom.render(<App \/>, document.getElementById('root'));\n\n<\/pre>\n
Greeting.js<\/em><\/span><\/p>\n
import React from 'react';\nimport '..\/css\/greeting.style.css';\nclass Greeting extends React.Component {\n    constructor(props) {\n        super(props);\n    }\n    render = () => {\n        return <h1>Hello { this.props.greet }<\/h1>;\n    }\n}\nexport default Greeting;\n<\/pre>\n
We will now proceed to configure the starting point or entry point of our application, which is, App.js. We will add the following to our webpack.config.js. This setting allows webpack to build its internal dependency graph of our application. Usually there is one entry point per page of an application.
 
<\/div> <\/div><\/p>\n
module.exports = {\n    mode: 'production',\n    entry: { App: '.\/js\/App.js' }\n}\n<\/pre>\n
App.js is also our root React component and thus aptly also the entry or starting module of our application. <\/p>\n
<\/a>3.2 Output Configuration<\/h3>\n
This is one of the key settings of Webpack where in we describe the output required and its destination. This setting is specified with the key output in the webpack.config.js file.<\/p>\n
var path = require('path');\n...\noutput: {\n        filename: '[name].bundle.js',\n        path: path.resolve(__dirname, 'dist'),\n        publicPath: 'assets\/'\n    }\n...\n<\/pre>\n
Here we tell webpack the name of the output bundle of our JavaScript code and its destination. Notice the use of the path node module to provide the exact location of our dist or distribution folder. We will serve our application out of this folder as we will later see. The publicPath setting sets the URL that will serve contents of this folder. <\/p>\n
<\/a>3.3 Loader and Plugin Configuration<\/h3>\n
Webpack uses the loaders specified to preprocess files before bundling them into final output. We use a few loaders here to accomplish two tasks, namely, Load CSS Files and transpile our JSX Code to plain JavaScript. So, let us take a look at each sequentially.<\/p>\n
3.3.1 Loading CSS Files<\/h4>\n
We will use a loader to generate a separate bundle. But first we must use the mini-css-extract-plugin to extract our CSS from import statements in our modules. We will first install the plugin using the following command.<\/p>\n
> npm install mini-css-extract-plugin --save-dev\n<\/pre>\n
Now we will import this into our settings file and configure it like so.<\/p>\n
var MiniCssExtractPlugin = require('mini-css-extract-plugin');\n...\nplugins: [\n        new MiniCssExtractPlugin({\n            \/\/ Options similar to the same options in webpackOptions.output\n            \/\/ all options are optional\n            filename: '[name].css',\n            chunkFilename: '[id].css',\n            ignoreOrder: false, \/\/ Enable to remove warnings about conflicting order\n        })\n]\n...\n<\/pre>\n
This plugin will work with the css-loader to extract the CSS styles out into a separate file. Next we need to install the css-loader and then configure both under the module.rules settings as follows:<\/p>\n
> npm install css-loader --save-dev\n<\/pre>\n
After installing this loader we will add the following configuration to our webpack settings file.<\/p>\n
...\n module: {\n        rules: [\n           {\n                test: \/\\.css$\/,\n                exclude: \/node_modules\/,\n                use: [{\n                    loader: MiniCssExtractPlugin.loader,\n                    options: {\n                        \/\/ you can specify a publicPath here\n                        \/\/ by default it uses publicPath in webpackOptions.output\n                        publicPath: 'assets\/'\n                    }\n                }, 'css-loader'\n                ]\n\n            }\n        ]\n    }\n...\n<\/pre>\n
The object under the rules key has test key which filters the files this loader will process. And in our case here the Regular expression selects files with css extension. Also, we exclude the node_modules folder and specify MinissExtractPlugin.loader and css-loader as the loaders to use for all css files.<\/p>\n
3.3.2 Transpiling JSX code to JavaScript<\/h4>\n
We will use babel to transpile our code to plain JavaScript. So let us first install babel using the following command:<\/p>\n
> npm install --save-dev babel-loader @babel\/core\n<\/pre>\n
This will install babel and babel-loader for webpack which we will configure next. We will add the babel-loader to our webpack settings file under the module.rules section. The following settings will go into the settings file.<\/p>\n
...\nmodule: {\n        rules: [\n            {\n                test: \/\\.js$\/,\n                exclude: \/node_modules\/,\n                use: [{\n                    loader: 'babel-loader',\n                    options: { presets: ['@babel\/preset-react', '@babel\/preset-env'] }\n                }]\n            }\n        }\n...\n<\/pre>\n
We have used two presets above, namely, @babel\/preset-react for transpiling JSX and @babel\/preset-env for transforms of ES2015+ syntax.<\/p>\n
Finally we look at the html-webpack-plugin to generate index.html and add all of our bundles into it. We will then be able to run webpack and see the result in the browser. <\/p>\n
3.3.3 Generating Html page<\/h4>\n
To generate Html page with all of our dependencies added as script tags or link tags we will use the html-webpack -plugin. To install it we need to execute the following command at the root of our application.<\/p>\n
> npm install html-webpack-plugin --save-dev\n<\/pre>\n
Next we require this plugin in our webpack configuration and add it to the plugins array as <\/p>\n
var htmlPlugin = require('html-webpack-plugin');\n...\nnew htmlPlugin({ template: '.\/public\/index.html' })\n...\n<\/pre>\n
The index.html file of ours will be the template. It contains the root element in which the root component of our React Application will display:<\/p>\n
index.html<\/em><\/span><\/p>\n
<!DOCTYPE html>\n<html>\n    <head>\n    <\/head>\n    <body>\n        <div id=\"root\"><\/div>           \n    <\/body>\n<\/html>\n\n<\/pre>\n
<\/a>4. Optimizing Bundle Size<\/h2>\n
Now that we have configured webpack using a settings file. Let us run webpack to see the output and application in action. To set things off we add the following commands to scripts in our package.json file.<\/p>\n
\"start\": \"webpack-dev-server --config webpack.config.js\"\n\"build\": \"webpack --config webpack.config.js\"\n<\/pre>\n
Now, when we run the following command, we should see a dist directory appear with the output bundles.<\/p>\n
> npm run build\n<\/pre>\n
The output directory should have our built artifacts as shown in the image below:<\/p>\n
\n
\"ReactJS
Dist Folder<\/figcaption><\/figure>\n<\/div>\n
Now, when we run the following command we should be able to run the application.<\/p>\n
> npm start\n<\/pre>\n
Navigating to the URL http:\/\/localhost:8080 should show the following result in the browser.<\/p>\n
\n
\"ReactJS
Project Output<\/figcaption><\/figure>\n<\/div>\n
When we build our application we get notified by webpack that our bundle exceeds optimal size. And it suggests that we look at code splitting to reduce the size of our bundle. The warning looks like below:<\/p>\n
\n
\"ReactJS
Build Warning<\/figcaption><\/figure>\n<\/div>\n
So, let us work to refactor out the vendor files out into their own bundle to remove this warning and reduce the size of our bundle. We need to make changes to our App.js file which looks like below as of now.<\/p>\n
App.js<\/em><\/span><\/p>\n
import React from 'react';\nimport ReactDom from 'react-dom';\nimport Greeting from '.\/Greeting';\nclass App extends React.Component {\n    render = () => {\n        return <Greeting greet=\"SiD\" \/>;\n    }\n};\n\nReactDom.render(<App \/>, document.getElementById(\"root\"));\n<\/pre>\n
We will move the react-dom package out into its own bundle. To do this we will dynamically import it and our code would look like below:<\/p>\n
App.js<\/em><\/span><\/p>\n
import React from 'react';\nimport Greeting from '.\/Greeting';\nclass App extends React.Component {\n    render = () => {\n        return <Greeting greet=\"SiD\" \/>;\n    }\n};\n\nimport(\/* webpackChunkName: \"react-dom\" *\/'react-dom').then((ReactDom) => {\n    ReactDom.render(<App \/>, document.getElementById('root'));\n});\n<\/pre>\n
Now, when we build our application you will notice a new bundle in the dist folder named, vendor~react-dom.bundle.js. The warning we saw earlier would go away as well. Since the entry bundle size is greatly reduced.<\/p>\n
<\/a>5. Configuring Dev Server<\/h2>\n
Webpack has a dev server and can be used, as the name suggests, during development as we work on our application. It can be configured like everything else in the webpack settings file. First we need to install it though. We can do that by executing the following command at the root of our application.<\/p>\n
> npm install webpack-dev-server --save-dev\n<\/pre>\n
Once the installation completes we can add the following configuration under the devServer key in the settings file.<\/p>\n
...\ndevServer: {\n        contentBase: path.join(__dirname, 'dist'),\n        compress: true\n    }\n...\n<\/pre>\n
We are using the path node module to configure the path from where our application would be served. To do this by setting the contentBase property to the path of our built artifacts. We also set compress to true to ensure our artifacts are compressed before being sent to the browser. Our complete configuration file should now look like below:<\/p>\n
var path = require('path');\nvar MiniCssExtractPlugin = require('mini-css-extract-plugin');\nvar htmlPlugin = require('html-webpack-plugin');\nmodule.exports = {\n    mode: 'production',\n    entry: { App: '.\/js\/App.js' },\n    output: {\n        filename: '[name].bundle.js',\n        path: path.resolve(__dirname, 'dist'),\n        publicPath: 'assets\/'\n    },\n    plugins: [\n        new MiniCssExtractPlugin({\n            \/\/ Options similar to the same options in webpackOptions.output\n            \/\/ all options are optional\n            filename: '[name].css',\n            chunkFilename: '[id].css',\n            ignoreOrder: false, \/\/ Enable to remove warnings about conflicting order\n        }),\n        new htmlPlugin({ template: '.\/public\/index.html' })\n    ],\n    module: {\n        rules: [\n            {\n                test: \/\\.js$\/,\n                exclude: \/node_modules\/,\n                use: [{\n                    loader: 'babel-loader',\n                    options: { presets: ['@babel\/preset-react', '@babel\/preset-env'] }\n                }]\n            },\n            {\n                test: \/\\.css$\/,\n                exclude: \/node_modules\/,\n                use: [{\n                    loader: MiniCssExtractPlugin.loader,\n                    options: {\n                        \/\/ you can specify a publicPath here\n                        \/\/ by default it uses publicPath in webpackOptions.output\n                        publicPath: 'assets\/'\n                    }\n                }, 'css-loader'\n                ]\n\n            }\n        ]\n    },\n    devServer: {\n        contentBase: path.join(__dirname, 'dist'),\n        compress: true\n    },\n    resolve: {\n        extensions: ['.css', '.js', '.jsx']\n    }\n};\n\n<\/pre>\n
Now, to run our application using the webpack dev server. We need to run the following command that we previously configured in our package.json file.<\/p>\n
> npm start\n<\/pre>\n
When we navigate to the URL http:\/\/localhost:8080, we can see the index.html page of our application as below.<\/p>\n
\n
\"ReactJS
http:\/\/localhost:8080<\/figcaption><\/figure>\n<\/div>\n
This wraps up our look at configuring webpack for a Reactjs Application.<\/p>\n
<\/a>6. Download the ReactJS Webpack Source Code<\/h2>\n
That was an example on ReactJS Webpack.<\/p>\n
Download<\/strong>
\nYou can download the full source code of this example here: Reactjs Webpack Tutorial<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
In this article we will look at Reactjs Webpack configuration for a Reactjs Application. Webpack is a hugely popular bundler. We will take a look at how we can configure it and set it up from scratch for an Application built with Reactjs. Specifically we will look at configuration of babel to transpile JSX code …<\/p>\n","protected":false},"author":82952,"featured_media":92051,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1903],"tags":[1919,1918],"class_list":["post-94167","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","tag-reactjs","tag-webpack"],"yoast_head":"\nReactJS Webpack Tutorial - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"Interested to learn more about ReactJS? Then check out our detailed example on ReactJS Webpack!Webpack is a hugely popular bundler.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ReactJS Webpack Tutorial - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about ReactJS? Then check out our detailed example on ReactJS Webpack!Webpack is a hugely popular bundler.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-30T04:00:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/07\\\/reactjs-webpack-tutorial.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/07\\\/reactjs-webpack-tutorial.html\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/09c54717e2cc7956aa8a2df61330f18c\"},\"headline\":\"ReactJS Webpack Tutorial\",\"datePublished\":\"2019-07-30T04:00:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/07\\\/reactjs-webpack-tutorial.html\"},\"wordCount\":1587,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/07\\\/reactjs-webpack-tutorial.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"keywords\":[\"Reactjs\",\"Webpack\"],\"articleSection\":[\"React.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/07\\\/reactjs-webpack-tutorial.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/07\\\/reactjs-webpack-tutorial.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/07\\\/reactjs-webpack-tutorial.html\",\"name\":\"ReactJS Webpack Tutorial - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/07\\\/reactjs-webpack-tutorial.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/07\\\/reactjs-webpack-tutorial.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"datePublished\":\"2019-07-30T04:00:10+00:00\",\"description\":\"Interested to learn more about ReactJS? Then check out our detailed example on ReactJS Webpack!Webpack is a hugely popular bundler.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/07\\\/reactjs-webpack-tutorial.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/07\\\/reactjs-webpack-tutorial.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/07\\\/reactjs-webpack-tutorial.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/07\\\/reactjs-webpack-tutorial.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"React.js\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\\\/react-js\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"ReactJS Webpack Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/09c54717e2cc7956aa8a2df61330f18c\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/siddharth-seth-240180\\\/\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/siddharth_seth1980\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ReactJS Webpack Tutorial - Java Code Geeks","description":"Interested to learn more about ReactJS? Then check out our detailed example on ReactJS Webpack!Webpack is a hugely popular bundler.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html","og_locale":"en_US","og_type":"article","og_title":"ReactJS Webpack Tutorial - Java Code Geeks","og_description":"Interested to learn more about ReactJS? Then check out our detailed example on ReactJS Webpack!Webpack is a hugely popular bundler.","og_url":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2019-07-30T04:00:10+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/09c54717e2cc7956aa8a2df61330f18c"},"headline":"ReactJS Webpack Tutorial","datePublished":"2019-07-30T04:00:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html"},"wordCount":1587,"commentCount":1,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","keywords":["Reactjs","Webpack"],"articleSection":["React.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html","url":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html","name":"ReactJS Webpack Tutorial - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","datePublished":"2019-07-30T04:00:10+00:00","description":"Interested to learn more about ReactJS? Then check out our detailed example on ReactJS Webpack!Webpack is a hugely popular bundler.","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/2019\/07\/reactjs-webpack-tutorial.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/www.javacodegeeks.com\/category\/web-development"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript"},{"@type":"ListItem","position":4,"name":"React.js","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript\/react-js"},{"@type":"ListItem","position":5,"name":"ReactJS Webpack Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/09c54717e2cc7956aa8a2df61330f18c","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.linkedin.com\/in\/siddharth-seth-240180\/"],"url":"https:\/\/www.javacodegeeks.com\/author\/siddharth_seth1980"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/94167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/82952"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=94167"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/94167\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/92051"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=94167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=94167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=94167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}