Webpack Basics: Part 1

5 min readApr 14, 2018

In my previous article we was working with Gulp.js and different related plugins (you can find article here). Now it’s time to prepare application using Webpack module bundler.

And if to be honest I didn’t thought that setup with Webpack will be much more simpler than with Gulp.js but now I think so. Soon you will understand why I’m saying like this :)

Contents:

What is Webpack
Main Concepts
Webpack setup
Basic configuration using Webpack config file
First build command
Watch with Webpack
Live reload

What it is?

From wikipedia: Webpack is an open-source JavaScript module bundler. Webpack takes modules with dependencies and generates static assets representing those modules. It takes the dependencies and generates a dependency graph allowing web developers to use a modular approach for their web application development purposes. The bundler can be used from the command line, or can be configured using a config file which is named webpack.config.js. (More information can be found here).

Core concepts:

Entry: An entry point indicates which module webpack should use to begin building out its internal dependency graph. After entering the entry point, webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).
Output: The output property tells webpack where to emit the bundles it creates and how to name these files, it defaults to ./dist. Basically, the entire app structure will get compiled into the folder that you specify in the output path.
Loaders: Loaders enable webpack to process more than just JavaScript files (webpack itself only understands JavaScript). They give you the ability to leverage webpack’s bundling capabilities for all kinds of files by converting them to valid modules that webpack can process.
Plugins: While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks. Plugins range from bundle optimization and minification all the way to defining environment-like variables. The plugin interface is extremely powerful and can be used to tackle a wide variety of tasks.

First Let’s setup our basic app structure:

Create Application folder

mkdir webpack-is-great
cd webpack-is-great

2. Initialize Node project (with — yes flag npm will just create default package.json file in root folder without asking any questions)

npm init --yes

3. Add git ignore file

touch .gitignore

4. Exclude node_modules folder by adding the following line to the .gitignore file

node_modules/

5. Add main html, javascript, css file into root dirrectory

touch index.html
touch script.js
touch style.css

index.js content:

<html><head>
  <title>Greatest App</title>
  <link rel="stylesheet" href="style.css">
</head><body>
  <img id="img" src="webpack.png" alt="webpack">
  <h1 class="main-header">Webpack</h1>
  <p class="wiki-desc">
    Webpack is an open-source JavaScript module bundler. Webpack takes modules with dependencies and generates static assets
    representing those modules.
  </p>
  <p>
    It takes the dependencies and generates a dependency graph allowing web developers to use a modular approach for their web
    application development purposes.
  </p>
  <p>
    The bundler can be used from the command line, or can be configured using a config file which is named webpack.config.js.
  </p>
  <script src="script.js"></script>
</body></html>

style.css content

body {
     background: rgba(141, 214, 249, 0.5);
     color: #465E69;
     text-align: center;
     margin-top: 125px;
}
 .main-header {
     padding: 20px 20px 0 20px;
     font-family: cursive;
}
 p {
     padding: 0 20px 0 20px;
     font-family: sans-serif;
}
 p.wiki-desc {
     font-style: italic;
     text-decoration: underline;
}
 .question-container .question {
     margin: 30px 30px;
}
 #img {
     width: 70px;
}
 .question-container button {
     padding: 15px;
     background: rgba(141, 214, 249, 0.5);
     color: #465E69;
     border: 2px solid;
     cursor: pointer;
     font-size: 1em;
     margin-left: 15px;
     outline: 0;
}

For now let’s leave javascript file empty. Let’s just add image for our page. Image can be downloaded from current article using browser.

Project Structure:

Page in Browser:

Webpack setup:

Install Webpack ( — save-dev flag means that all modules are going to be stored in dev dependencies):

npm install webpack webpack-cli --save-dev

I would suggest to install current modules globally using following command:

npm install -g webpack webpack-cli

2. Create webpack.config.js file

touch webpack.config.js

Simple configuration:

Paste the following code to the webpack.config.js file

module.exports = {
  entry: "./script",
  output: {
    filename: "bundle.js"
  },
  mode: 'development'
}

For now do not concentrate your attention on mode property, I will try to cover it soon. (all other properties was covered in core concepts).

2. Add build command to package.json file:

...
"scripts": {
  "build": "webpack"
},
...

3. Change index.html script source path:

<script src="dist/bundle.js"></script>

4. Add logging to see that all is working correctly (in script.js):

console.log('Hello Webpack World');

5. And run from prompt build command:

npm run build

In the end of build you will see in your root directory new folder with name dist. In that folder will be bundle.js file that was included to our html page.

Watch with Webpack

First really awesome thing that I like in webpack is that we do not need to describe own watch, because it’s working from the box! Yup that is cool. The only think you need to do is to set watch property to true in your webpack.config.js file and restart webpack:

...
watch: true
...

After you will see that on each change webpack is going to rebuild application. All you need to refresh page.

Live reload

One more awesome thing that I like in Webpack it is simple setup of live reload feature.

Install webpack-dev-server module

npm install webpack-dev-server --save-dev

2. Add run command into package.json

...
"scripts": {
  "build": "webpack",
  "start": "webpack-dev-server --inline"
},
...

3. Update script src attribute. It is needed because webpack-dev-server serves the created bundle from memory and does not write it to the dist directory.

<script src="bundle.js"></script>

3. Run webpack dev server

npm start

That’s all! Yes you hear it well, that is all what we need to do in order to use live reload feature. Now with each change will be rebuilt and browser refresh.

By default Webpack runs on http://localhost:8081/

If you need to run it on some other port just add devServer and port property to webpack.config.js file.

...
devServer: {
  port: 3001
}
...

now it’s running on http://localhost:3001/

Conclusion

Thank you guys for reading. I hope you enjoyed it and learned some new stuff related to JavaScript. Please subscribe and press ‘Clap’ button if you like this article.