Introduction to Webpack

Loading...

Do curso por The Hong Kong University of Science and Technology

Front-End Web Development with React

141 classificações

The Hong Kong University of Science and Technology

Front-End Web Development with React

141 classificações

Curso 2 de 4 em Specialization Full-Stack Web Development with React

This course explores Javascript based front-end application development, and in particular the React library (Currently Ver. 16.3). This course will use JavaScript ES6 for developing React application. You will also get an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be introduced to various aspects of React components. You will learn about React router and its use in developing single-page applications. You will also learn about designing controlled forms. You will be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use it to develop React-Redux powered applications. You will then learn to use Fetch for client-server communication and the use of REST API on the server side. A quick tour through React animation support and testing rounds off the course. You must have preferably completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript application development and the React library - Be able to implement single page applications in React - Be able to use various React features including components and forms - Be able to implement a functional front-end web application using React - Be able to use Reactstrap for designing responsive React applications - Be able to use Redux to design the architecture for a React-Redux application

Na lição

More Redux and Client-Server Communication

In this module you will explore Redux further including Redux action, combining reducers, and Redux thunk, client-server communication using Fetch and the REST API. You will get a brief introduction to animation in React. You will also learn about testing, building and deploying React applications.

Introduction to Webpack7:53

Exercise (Video): Building and Deploying the React Application11:40

Conheça os instrutores

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

In the previous course on Bootstrap 4,

we had seen the use of NPM scripts,

Grunt and Gulp for building the distribution folder for our website.

We had seen how these scripts can be used for doing concatenation,

uglification and minification in order to build

the distribution folder which can then be deployed to our website.

That pack is another approach that helps us do exactly the same.

That pack is what is called a module bundler.

What exactly is Webpack and how does it help us to build the distribution folder?

We will examine a little more details about that in this lecture and

also see how we can use it in the exercise that follows.

For our React Application,

we had used Create React App to scaffold out our React Application.

Create React App itself,

uses React scripts and NPM module underneath for supporting

all the various activities that we need to do for our React Application.

It internally uses Webpack to do the building of the distribution folder.

So, in the exercise,

we will examine how we can make use of it to build our distribution folder.

Before that, let's learn a little bit about Webpack.

Now, this lecture is not about how you make use of the pack.

That is beyond the scope of this course.

Instead, I will briefly mention of what Webpack enables us to do.

Now to learn how do we make use of the Webpack,

you would have to go to the Webpack's documentation and then read that up.

Since our React Application is already set up

with Webpack and all the configuration is automatically done for us,

we don't need to worry about setting up the pack.

That automatically comes for the light with our React Application.

So, obviously, the first question that arises in your mind is,

what exactly is Webpack? What are we talking about?

Webpack, this is a definition from the Webpack documentation itself.

It says, Webpack is a module bundler for modern JavaScript applications.

Now, what Webpack does is,

it looks at the entire structure of your application.

So, it recursively traverses through your code looking to see how best

to bundle the information into what is called as bundles.

Then that pack looks at your code.

It treats every file that you have,

be it a JavaScript file,

be it a CSS file,

be it a Sass file,

be it an image file, whatever,

it treats every one of them as modules from its perspective and then it decides,

what is the best way of packaging this modules

into what are called bundles 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 a bundle means.

As I briefly stated in the previous slide,

a bundle is nothing but a JavaScript file that incorporates assets.

Now, you have to keep this in mind that Webpack treats everything as JavaScript.

To it, whether it is CSS or any of the other kinds of files,

they will also be treated as JavaScript from the perspective of a pack.

Now, don't get too concerned.

That pack knows how to package them and treat

them as JavaScript modules when it prepares those bundles.

So, a bundle is something that groups together modules that belong together.

So, it bundles those modules together that should be served

to the client in a single response to a request.

So that pack itself makes a decision on saying,

what part should be joined together

into a bundle and should be delivered together so that

the rendering of your web application is done in the most effective manner?

So, what Webpack does is,

it starts at the top most level.

So, it's starts there and then it follows all the imports that you use in those

down their path and build up a hierarchical organization of all the different parts.

So, what is called as a dependency graph is built by the pack.

Now, using this dependency graph,

that pack then decides how to package its bundles and that emits

one or more bundles as they make sense

for your particular application that Webpack is bundling.

In the process of doing it,

when it is handling non-JavaScript files, like CSS,

HTML and Sass or images and so on,

then it uses plugins that enable you to pre-process and minify those files,

those non-JavaScript files into a way that they can be bundled into your Webpack bundles.

If you are using Webpack from the scratch,

then you would describe some of the configuration for your Webpack to work on

these files in 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 on how Webpack works on things.

The first one is entry.

Entry is a point that which the Webpack should

start and follow down to build the dependency graph.

Now, the second part is what we'll call the output.

In Webpack, the output is the set of bundles that are Webpack prepares on your behalf.

The third one is loaders.

Now, Webpack as I said only understands

JavaScript and it knows only how to work with JavaScript.

But as I also mentioned,

Webpack treats every file as a module.

So, those files that are not JavaScript,

they have to be transformed and then put into your bundles by

using appropriate transformations and then they will be added into your dependency graph.

This is where the use of the various plugins come in.

What do plugins help you to do?

The plugins help you to perform the various actions and custom functionalities,

like compilations that you need to do for building up your bundles.

So, it will help you to transform your CSS into

a way that you can package into your JavaScript bundles and so on.

So, that is a quick introduction to how Webpack actually works.

Now, that we have briefly learnt about Webpack and Webpack concepts,

let's move on to the exercise.

We will make use of React scripts which uses Webpack

to generate the build folder for our React Application.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play