React.js17.x: Creating Application with WebPack 5.x
Creating React.js 17.x Application From Scratch using Webpack 5.0
In my previous article, I have explained the approach of creating React.js application using Webpack from the scratch. The React Application can be created using create-react-app tool, but not all projects are using that approach. With my experience with some of the customers, I have experienced that they are also using React.js application for development, build, and production using Webpack configuration.
The WebPack is a static module bundler for the modern JavaSCript application e.g. React.js, Angular, etc. When the Webpack is used to process that application using the configuration, it internally builds the dependency graph based on dependencies used in the application development. These dependencies could be, bootstrap framework, or any other JavaScript files used in the project. The Webpack configuration allows using various loaders to load these CSS styles in the application and further helps to create the development and production build.
In this article, we will discuss all steps to create a React.js application and configure it. In this article, we will be using Webpack version 5.0. The new version of Webpack is released last year in October. In this article, we will also see the Webpack configuration for the development and production environment. We will be requiring the following packages for the configuration of the React.js application with Webpack.
- @babel/core
- Since we will use ES 6+ JavaScript for the React.js coding we need the Babel Transpilaer to transpile the JavaScript code.
- @babel/preset-env
- This is a smart preset that allows using the latest JavaScript without bothering to decide on the JS Syntax that is supported the target environment. This is used to make the development easier and reducer the size of the javascript bundle.
- @babel/preset-react
- This is a preset that is used for React for making the react development experience easier without worrying about the JavaScript Syntax to be followed during coding. This preset includes the following plugins
- @babel/plugin-syntax-jsx
- @babel/plugin-transform-react-jsx
- @babel/plugin-transform-react-display-name
- babel-loader
- This package is used for transpiling the JavaScript files using Babel and Webpack.
- css-loader, scss-loader,style-loader
- This is used in the case when the Webpack needs to include CSS, SCSS files in the React bundle.
- html-webpack-plugin
- This plugin is used to simplify the creation of HTML files to serve the output bundle.
- webpack, webpack-dev-server, webpack-cli, webpack-merge
- These packages are used for them making the use of webpack bundler in the application.
- The webpack-dev-server is the development server that is used to run the JavaScript application development environment.
- The webpack-merge provides a merge function. This function provides the functionality of concatenating arrays and merging objects. In this example, we will be creating separate webpack configurations for the development and production environment. The development and production environment will be having common configurations. The merge function will be used to merge the common configuration with the development and production configuration.
- clean-webpack-plugin
- This plugin is used to clean the output or destination folder from all Webpack unused assets.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>React.js 17 with Webpack</title> </head> <body> <h1>The React.js app with Webpack</h1> <div id="root"></div> </body> </html>
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
import React from 'react'; const NewComponent=()=>{ return ( <div className="container"> <h2>Thew New Component</h2> </div> ); }; export default NewComponent;
app.js
import React from 'react'; import NewComponent from './newcomponent'; const App=()=>{ return ( <div> <h1>The React App</h1> <NewComponent></NewComponent> <input type="button" value="Click" className="btn btn-success"/> </div> ) }; export default App;
index.js
import React from 'react'; import ReactDOM from 'react-dom'; // import './../node_modules/bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { entry: './src/index.js', // an entry point for the build, dev and production module: { // configuring all the dependencies rules: [ { test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader'] }, { test: /\.(css|scss)$/, use: [ "style-loader", // creates style nodes from JS strings "css-loader", // translates CSS into CommonJS "sass-loader" // compiles Sass to CSS, using Node Sass by default ] } ] }, resolve: { extensions: ['.js', '.jsx'], }, plugins: [ new HtmlWebpackPlugin({ template: 'public/index.html' // the HTML output }) ], output: { filename: '[name].bundle.js', // The output file that will be generated path: path.resolve(__dirname, 'dist'), // The folder where the output will be generated clean: true, }, };
const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); const port = process.env.PORT || 3000; module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', devServer: { static: './dist', host: 'localhost', port: port } });
const { merge } = require('webpack-merge'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'production', devtool: 'source-map', entry: './src/index.js', output: { filename: 'main.min.js', path: path.resolve(__dirname, 'dist') }, performance: { hints: false, }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ filename: 'index.html', inject: true, template: path.resolve(__dirname, 'public', 'index.html'), }), ] });
..... "scripts": { "start": "webpack serve --open --config ./webpack.dev.js", "build": "webpack --config webpack.prod.js", "prod": "webpack serve --config webpack.prod.js" }, .....