Introduction to Webpack
In this article, we will learn what exactly is Webpack? What are we talking about? Webpack, this is often a definition from the Webpack documentation itself. It says Webpack may be a module bundler for contemporary JavaScript applications. Now, what Webpack does is, it’s at the whole structure of your application. So, it recursively travels through your code looking to see how best to bundle the information into what is called bundles (a group of files).
Then that Webpack looks at your code. It treats every file that you simply have, be it a JavaScript file, be it a CSS file, be it a Sass file, be it a picture file, whatever, and then it decides, what is the best way of packaging these modules into what are called bundles(a bunch of files) that can be downloaded from the server to your web browser in a comfortable and convenient manner. So, when we talk about Webpack, we obviously need to clarify what is bundle means.
As I briefly stated within the previous slide, a bundle is nothing but a JavaScript file that comes with assets. Now, you’ve got to stay this in mind that Webpack treats everything as JavaScript. To it, whether it’s CSS or any of the opposite sorts of files, they’re going to even be treated as JavaScript from the attitude of a pack. That pack knows the way to package them and treat them as JavaScript modules when it prepares for those bundles. So, a bundle is something that groups together modules that belong together for hosting.
What is bundling in Webpack ?
Webpack bundles those modules together that ought to be served to the client during a single response to an invitation. Hence that pack itself makes a choice on saying, what part should be joined together into a bundle and will be delivered together in order that the rendering of your application is done in the most effective and productive manner? Hence, what Webpack does is, it starts at the highest most level. So, it starts there, and then it follows all the imports that you use in those down their path and builds up a hierarchical organization of all the different parts. So, what is called as a dependency graph is built by the pack or something else?
Now, using this dependency graph, that pack then decides the way to package its bundles which emits one or more bundles as they create a sense for your application that Webpack is bundling the files. In the process of doing it, when it’s handling non-JavaScript files, like CSS, HTML, and Sass or images then on, then it uses plugins that enable you to pre-process and minify those files, those non-JavaScript files into how that they will be bundled into your Webpack bundles.
.Configuring WebPack
const path = require(‘path’);
02| const HWP = require(‘html-webpack-plugin’);
03| module.exports = {
04| entry: path.join(__dirname, ‘/src/index.js’),
05| output: {
06| filename: ‘build.js’,
07| path: path.join(__dirname, ‘/dist’)},
08| module:{
09| rules:[{
10| test: /\.js$/,
11| exclude: /node_modules/,
12| loader: ‘babel-loader’
13| }]
14| },
15| plugins:[
16| new HWP(
17| {template: path.join(__dirname,‘/src/index.html’)}
18| )
19| ]
20| }If you’re using Webpack from the scratch, then you’d describe a number of the configurations for your Webpack to figure on these files during a file named webpack.config.js which should be included in the root folder of your application. Now, when we talk about Webpack, there are four concepts that are important for us to understand how Webpack works on things. The first one is the entry. Entry may be a point that which the Webpack should start working and follow right down to build the dependency graph for an application. Now, the second part is what we’ll call the output. In Webpack, the output is that the set of bundles that are Webpack prepares on your behalf. The third one is the loaders.
Now, Webpack as I said only understands JavaScript and it knows only the way to work with JavaScript. But as I also mentioned, Webpack treats every javascript, CSS file as a module that can be used later. So, those files that aren’t JavaScript, need to be transformed then put into your bundles by using appropriate transformations then they’re going to be added into your dependency graph. What do plugins help you to do? The plugins assist you to perform the varied actions and custom functionalities, like compilations that you simply got to do to build up your bundles.
So, it’ll assist you to rework your CSS into how that you simply can package into your JavaScript bundles then on. So, that’s a fast introduction to how Webpack actually works. Now, that we’ve briefly learned about Webpack and Webpack concepts. We will make use of React scripts which uses Webpack to get the build folder for our React Application.
Actual use of Webpack :
Now let’s see how to make use of this webpack? To create a build folder for our react application, at the prompt type npm run build and as you already understand this concept, this will run the build script from our package.json file, which essentially invokes react-scripts with the build option, and that will end up building our application for deployment.
npm run build
// we can see following output on our terminal after runing above command linux:sarveshraut/ npm run build confusion@0.1.0 build /user/sarveshraut/Document/React/react-scripts build creating an optimized production build... file size after gzip: 126.2 kb build/static/js/277f6084.js 29.76 kb build/static/css/b89978v.js The project was build assuming that it is hosted on a server ROOT You can control this on your homepage field at Package.js "homepage" : "https://myname.github.io/myapp
What is Babel?
Babel is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).
It makes available all the syntactical sugar that was added to JavaScript with the new ES6 (new version of javascript), including classes and multiline strings.
Currently, most browsers support ES5. ES5 used to be good even though it was so painful to code in it.Is this not reading from inside callback functions? The new version of Javascript, ES6, also known as ES2015 makes Javascript great again.
If you want to learn about ES6. All the good features of ES6 accompany one big problem — the majority of browsers don’t fully support them. That’s when Babel comes to its work. Babel may be a JS transpiler that converts new JS code into old ones. It is a really flexible tool in terms of transpiring. One can easily add assets such as es2015, es2016, es2017, or env; so that Babel compiles them to ES5.
.Configuring Babel
{"presets":["env", "react"]}
Links :
.Babel
.Webpack
.Webpack: an Introduction
.create-react-app Build
Conclusion :
The purpose of this article is to explain why these tools are necessary for fastly building web apps using React (or Angular, Vue, etc) and how these tools work together to provide fast development and one-click Platform to become more user friendly.
