New project announcement
I recently shipped courses.reviews - an LLM-powered search engine for discovering courses with trusted reviews and exclusive deals to save time and money. Keep learning. Stay relevant. Don't let AI replace you.
Archived
Published
3 min read

Trevor I. Lasn

Building tools for developers. Currently building courses.reviews and blamesteve.lol

How to setup Webpack +2.0 from scratch in 2017

Webpack is another evolution in the JavaScript tooling ecosystem

If you’re feeling intimidated by Webpack, don’t worry; you’re not alone. Webpack is intimidating.

Webpack config.js

What exactly is a proxyTable, anyway? Why do we need so many files just to compile our code? Don’t worry—we’ll start from the very beginning.

Webpack is the next step in the evolution of front-end tooling. First, there was Grunt, then came Gulp, and now we have Webpack.

When you have a more complex and resource-heavy project, Webpack is definitely the way to go. For example, you might need to compile JavaScript, SCSS, import files, hot-reload without affecting the current state, bundle production builds, and more.

Webpack to the Rescue

If you want to become a well-rounded frontend engineer, knowing Webpack is essential. I’ll try to make this as easy as possible.

Let’s Get Started!

Things You’ll Need:

  • Basic knowledge of Node.js
  • NPM (Node Package Manager)
  • Basic command line/terminal skills
  • A text editor (any will do)
  • A Unix-like operating system (Mac or Linux)
  • Install Node.js

Setting Up Webpack

With Node.js and NPM installed, we’re ready to set up Webpack. Start by creating a new project folder and navigate to it in your terminal. Initialize a new Node.js project with:

Terminal window
npm init -y

This will create a package.json file, which is the basic configuration file for your project.

Now, let’s create the necessary files: index.html, webpack.config.js, and index.js. Your project structure should look something like this:

my-project/
├── index.html
├── webpack.config.js
└── index.js

Install Webpack Dependencies

We need to install Webpack and Webpack Dev Server, which will serve our files via HTTP.

Terminal window
npm install --save-dev webpack webpack-dev-server

Configuring Webpack

Open webpack.config.js and start by requiring Webpack:

const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'development',
};

This basic configuration tells Webpack where to find the entry file (index.js) and where to output the bundled file (bundle.js).

Connecting Webpack to HTML

In index.html, include the bundled JavaScript file by adding a <script> tag:

<script src="bundle.js" />

Running Webpack

Before you can run Webpack, install it globally:

Terminal window
npm install -g webpack webpack-cli

Now, you can run Webpack with:

Terminal window
webpack

Webpack will generate a bundle.js file in the dist directory. Open index.html in your browser, and you’ll see the result of your first Webpack project.

How Do We Watch for Changes?

Currently, we have to manually re-run the compile task every time we make a change. That’s tedious and time-consuming. Luckily, there’s an easy fix!

Terminal window
webpack --watch

This command will automatically recompile your project whenever changes are detected, saving you time and effort.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.


Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
3 min read

CSS ::target-text for Text Highlighting

A look at how browsers can highlight text fragments using CSS ::target-text, making text sharing and navigation more user-friendly

Dec 17, 2024
Read article
Webdev
3 min read

HTML Details Element: The Native Accordion You're Not Using

Discover how the HTML details element can replace your JavaScript accordions and why it might be better than your current solution

Dec 10, 2024
Read article
Webdev
2 min read

link rel='modulepreload': Optimize JavaScript Module Loading

The rel='modulepreload' indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution

Dec 4, 2024
Read article
Webdev
4 min read

Self-Taught Developer's Guide to Thriving in Tech

How to turn your non-traditional background into your biggest asset

Sep 28, 2024
Read article
Webdev
3 min read

align-content: The Simplest Way to Center Content with CSS

Finally, we can center things in block layouts without flexbox gymnastics

Dec 13, 2024
Read article
Webdev
4 min read

Explicit is better than implicit

Clarity is key: being explicit makes your code more readable and maintainable.

Sep 4, 2024
Read article
Webdev
7 min read

Tips for Reducing Cyclomatic Complexity

Cyclomatic complexity is like counting how many ways a car can go. More options make it harder to drive because you have to make more decisions, which can lead to confusion.

Sep 10, 2024
Read article
Webdev
3 min read

CSS content-visibility: The Web Performance Boost You Might Be Missing

The content-visibility CSS property delays rendering an element, including layout and painting, until it is needed

Dec 5, 2024
Read article
Webdev
4 min read

Mental Toughness is the Best Quality a Developer Can Have

Mental toughness gets developers through challenges like debugging, picking up new tools, and hitting tight deadlines. It’s about staying calm and pushing through when things get tough.

Sep 12, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/easy-guide-for-webpack-2-0-from-scratch. It was written by a human and polished using grammar tools for clarity.