Getting started with Webpack
- GSP1133
- Overview
- Prerequisites
- Setup and requirements
- Task 1. Creating a HTML page
- Task 2. Enhancing HTML with JavaScript
- Task 3. Adding Webpack packages
- Task 4. Scripting the build
- Task 5. Adding a Webpack configuration
- Task 6. Adding a CSS loader
- Task 7. Adding an Image loader
- Task 8. Migrating to a HTML template
- Congratulations!
GSP1133
Overview
In this lab you will learn the fundamentals of Webpack development for the web. If you are new to web development or looking for an overview of how to get started, you are in the right place.
Read on to learn about the specifics of this lab and areas that you will get hands-on practice with.
What you'll learn
In this lab, you will learn about the following:
- Creating a boilerplate HTML page
- Adding JavaScript to the page
- Initializing Webpack using npm
- Adding a Webpack configuration
- Enhancing HTML with CSS
- Incorporating an image loader
- Transitioning to a HTML template
Prerequisites
This is an introductory-level lab and the first lab you should take if you're unfamiliar with Webpack.
If you have a personal or corporate Google Cloud account or project, sign out of that account. If you stay logged in to your personal/corporate account and run the lab in the same browser, your credentials could get confused, resulting in getting logged out of the lab accidentally.
If you use ChromeOS, please run your lab using an Incognito window.
Over the course of this lab the following elements are required:
- Basic knowledge of HTML and CSS
- An understanding of Node.js
Setup and requirements
Before you click the Start Lab button
Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long Google Cloud resources will be made available to you.
This hands-on lab lets you do the lab activities yourself in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials that you use to sign in and access Google Cloud for the duration of the lab.
To complete this lab, you need:
- Access to a standard internet browser (Chrome browser recommended).
- Time to complete the lab---remember, once you start, you cannot pause a lab.
How to start your lab and sign in to the Google Cloud console
-
Click the Start Lab button. If you need to pay for the lab, a pop-up opens for you to select your payment method. On the left is the Lab Details panel with the following:
- The Open Google Cloud console button
- Time remaining
- The temporary credentials that you must use for this lab
- Other information, if needed, to step through this lab
-
Click Open Google Cloud console (or right-click and select Open Link in Incognito Window if you are running the Chrome browser).
The lab spins up resources, and then opens another tab that shows the Sign in page.
Tip: Arrange the tabs in separate windows, side-by-side.
Note: If you see the Choose an account dialog, click Use Another Account. -
If necessary, copy the Username below and paste it into the Sign in dialog.
{{{user_0.username | "Username"}}} You can also find the Username in the Lab Details panel.
-
Click Next.
-
Copy the Password below and paste it into the Welcome dialog.
{{{user_0.password | "Password"}}} You can also find the Password in the Lab Details panel.
-
Click Next.
Important: You must use the credentials the lab provides you. Do not use your Google Cloud account credentials. Note: Using your own Google Cloud account for this lab may incur extra charges. -
Click through the subsequent pages:
- Accept the terms and conditions.
- Do not add recovery options or two-factor authentication (because this is a temporary account).
- Do not sign up for free trials.
After a few moments, the Google Cloud console opens in this tab.
Task 1. Creating a HTML page
HTML can be used to quickly create an online application. In this section create a basic HTML web form that will be enhanced to perform a conversion calculation Hectares and Acres.
To get started create the environment setup needed to host the source files.
- Right click on the Cloud Shell link
- Select Open link in an incognito window
- Use gcloud to set the project configuration:
- Make a folder for the application named webpack-lab :
- Within the webpack-lab folder, create a new folder named dist :
- Create a new file named dist/index.html :
- Run the application from the webpack-lab/dist folder:
- Use web preview on port 8080 to view the application html page.
The basic html page is up and running. In the next section learn how to add interactivity to the page by adding JavaScript.
Task 2. Enhancing HTML with JavaScript
A HTML page provides static content which can be enhanced with the addition of JavaScript. In this example JavaScript will be added to perform the calculation on the number entered by the user.
To achieve this, add a script element to the HTML page that will call some JavaScript code.
Add a small script to perform the calculation needed to change hectares into acres.
- Within the webpack-lab folder, create a new folder named src :
- Create a new file src/index.js with the following contents:
- Edit the dist/index.html file to amend the index.js file reference:
- The file dist/index.html should now look similar to below:
- Run the application from the webpack-lab/dist folder:
- Use web preview on port 8080 to view the application html page:
The index.html will now perform a calculation when a number is entered on the form.
The page now includes both html and JavaScript, however there are a lot of components to manage. In the next section introduce Webpack functionality to the existing application and use that to manage component functionality.
Task 3. Adding Webpack packages
According to the webpack.js.org site "...webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from."
While the initial setup can seem intimidating, the functionality it provides makes the development workflow more consistent. To transition from the original code to webpack, use Node.js to managed the packages as outlined below:
- From the webpack-lab folder, initialize the environment:
- Install the webpack packages:
- Edit the package.json file and add the following below the line containing "main": "index.js":
- Edit the package.json file and remove the following line:
The application has now been initialized to use Node.js and webpack development packages. In the next section learn how to use Webpack to transpile code for the application.
Task 4. Scripting the build
Webpack can do a lot of the work to generate files. The original application configuration was set to use the dist folder for the working directory. With the addition of webpack, a build can now be used to generate the
Use webpack to perform some of the application management duties. Start with telling webpack we are using a development mode.
- Edit the package.json file
- Add a build script to call the webpack component and set the mode to development
- Run the build script for the application from the command line
-
A main.js is now present in the webpack-lab/dist folder.
-
Run the application from the webpack-lab/dist folder.
- The application will generate a new main.js in the webpack-lab/dist folder.
- Edit the dist/index.html and amend the JavaScript filename to use webpack generated main.js.
- The dist/index.html file will be similar to below:
Example Output
- Run the application from the webpack-lab/dist folder:
Now webpack is generating a compiled main.js, the application components are created in the dist folder. Webpack can provide more help with the build process, but will require a configuration file.
In the next section learn how to start using a Webpack configuration.
Task 5. Adding a Webpack configuration
Enhance the project with Webpack configuration setting.
- In the webpack-lab folder, create a file webpack.config.js
- Add the following content to the webpack.config.js file
- Run the build for the application from the command line
- Update the webpack.config.js and set the output filename as main.js.
- Amend the package.json file to use the webpack.config.js :
- Run the build for the application from the command line:
- Run the application from the webpack-lab/dist folder:
The basic Webpack configuration is now active.
In the next section learn how to add CSS styling to the application using a Webpack loader.
Task 6. Adding a CSS loader
Enable the use of file extensions using CSS functionality.
- In the webpack-lab folder, edit the webpack.config.js file
- Add a loader section for using CSS and SCSS
- Add the style-loader and css-loader modules for loading css:
- Create a src/style.css file:
- Edit the src/index.js to include an import to the
style.css
:`
- Run the build for the application from the command line:
- Run the application from the webpack-lab/dist folder:
The application will now automatically incorporate changes made to both the JavaScript and CSS content when the bundle is built.
In the next section learn how to add an image to the application using a Webpack loader.
Task 7. Adding an Image loader
Move the html file to a template, so the entire application can be generated.
- Create a new folder src/assets within the existing src folder:
- Download the application icon:
- Update the src/index.js to reference the image asset
- Add assetModuleFilename output in the webpack.config.js :
- Add a loader for the image to webpack.config.js :
- Run the build for the application from the command line:
- Run the application from the webpack-lab/dist folder:
Adding an image via a reference provides a lot of flexibility to the configuration. Changes to the image can be applied without making changes to the HTML template or JavaScript. Keeping a consistent naming strategy can save effort using the above approach.
In the next section learn how to add HTML to the application using a Webpack plugin.
Task 8. Migrating to a HTML template
So far in this lab we have concentrated on generating assets and code. However we are still reliant on the index.html present in the dist folder. Ideally we should also be able to generate this file as part of the Webpack build process.
Use the html-webpack-plugin to generate the file index.html from a template within the src folder.
- In the webpack-lab folder, edit the webpack.config.js file.
- Add a const for the HtmlWebpackPlugin :
- Add a plugins statement for the template declaration:
- The webpack.config.js file should look similar to below:
Example Output
- Copy the existing dist/index.html to src/tempate.html :
- Edit the src/template.html to match below:
- Install the html-webpack-plugin package
- Move the dist folder to a backup :
- Run the build for the application from the command line:
- Run the application from the webpack-lab/dist folder:
The dist folder now contains fully generated code. Try deleting the dist folder and running the build command.
Our application is now consistent with the source code and can be built based on the contents of the src folder. In this lab you have learned about the basics of Webpack. To learn more about Webpack, visit the webpack site and follow the documentation to learn more sophisticated ways to build code.
Congratulations!
In just 30 minutes, you developed a solid understanding of Webpack and the key features. You learned about Webpack configuration, CSS loaders, Asset loaders and creating a HTML template. You used some JavaScript with Node.js to bundle your environment source code. You are now ready to take more labs.
Finish your quest
This self-paced lab is part of the JavaScript Web Developer quest. A quest is a series of related labs that form a learning path. Completing a quest earns you a badge to recognize your achievement. You can make your badge or badges public and link to them in your online resume or social media account. Enroll in any quest that contains this lab and get immediate completion credit.
See the Google Cloud Skills Boost catalog for all available quests.
Take your next lab
Continue your quest with Getting started with Firebase Email Authentication, or check out these other Google Cloud Skills Boost labs:
Google Cloud training and certification
...helps you make the most of Google Cloud technologies. Our classes include technical skills and best practices to help you get up to speed quickly and continue your learning journey. We offer fundamental to advanced level training, with on-demand, live, and virtual options to suit your busy schedule. Certifications help you validate and prove your skill and expertise in Google Cloud technologies.
Manual Last Updated November 23, 2023
Lab Last Tested July 23, 2023
Copyright 2023 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.