Simple webpack 3 tutorial

A few months ago, I started to play around with webpack and I remember the pain I had to go through to get it up and running. The information I was gathering from different tutorials online was very confusing; some of them were outdated and giving weird npm errors, others were going into advanced features of webpack. For this exact reason, I decided to write a very short and basic webpack 3 tutorial for people having similar issues as me to use webpack.

Webpack is a module bundler which allows you to create a web application with multiple modules written in JS, HTML & CSS. The beauty of webpack is it’s ability to bundle the whole application and its dependencies in a handful number of static assets (i.e HTML/CSS/JS).

So let’s get started! We will start by setting up the project, configuring webpack and building a simple webpack 3 app.

Project setup

• Create an empty folder and initialise it :
  > mkdir simple-webpack && cd simple-webpack && npm init

Hit ENTER multiple times to accept the default options.

• Create the src and dist folders :
  > mkdir src dist src/css
• Create the webpack.config.js which will contain all the config for webpack.
  > touch webpack.config.js
• Install webpack and webpack-dev-server :
  > npm install -D webpack@3 webpack-dev-server@2
• Let’s edit the package.json file to add webpack and webpack-dev-server commands :

Configuring webpack

Webpack comes with a configuration file webpack.config.js that has the following structure :

var config = {
    entry: { ... },
    output: { ... },
    module: {
        rules: [ ...
        ]
    }
}

There are mainly three sections on the config file :
- entry: defines where your source files are.
- output: is the folder where webpack creates the bundled assets
- rules: contains loaders to apply for each file type (i.e .js, .css, .scss, etc)

• Configuring the entry and output is quite easy, we just need to point to the source folder and output folder we created earlier.

context: __dirname + '/src', // base folder for our source files
entry: {
  app: './main.js',
},
output: {
  path: __dirname + '/dist',
  filename: 'bundle.js',
},

Loaders
For our tutorial, we will need to add some basic loaders. A loader is a tool that takes care of preprocessing and transforming files of a certain type (JS, CSS, …) to a javascript bundle.
We will use 3 basic loaders in our example :

• babel-loader for JS files:
  > npm install -D babel-loader babel-core
  Let’ configure this loader by adding a rule in the module/rules section ofwebpack.config.js

 module: {
  rule: [
    {        
      test: /\.js$/, // rule for .js files        
      exclude: /node_modules/,        
      loader: "babel-loader" // name of the loader   
    }
  ]
}

It’s pretty easy, we just need to supply a regex expression to match the files we want to apply the loader on and the name of the loader.

• style-loader and css-loader for CSS files:
  > npm install -D css-loader style-loader

{        
    test: /\.css$/,        
    use: ['style-loader', // order is important !
          'css-loader'] // this is loaded first
}

• file-loader to load HTML files:
  > npm install -D file-loader

Here’s our final webpack.config.js

Building a simple app

That’s it for webpack configuration, let’s go ahead and create our basic app consisting of 3 files :

• main.js

The first line is used to load the index.html file, and inject the css file on that file.

• index.html:

Notice we don’t import css in this file, webpack will include that in the bundle.js

• css/style.css

#hello {
  font-weight: bold;
}

So, if you have followed this correctly, this is how your folder structure should look like.

Building the app

Let’s build our app using webpack. It’s pretty simple we just need to run the scripts we defined earlier.

Webpack in development mode
> npm run build this will run webpack in development mode and compile our code under ./src and build the compiled assets under ./dist

Go ahead and check your ./dist folder, you should be able to find the compiled assets.

Webpack in production mode
The production mode applies a bunch of optimizations to make our target files smaller, it also obfuscates the JS making the compiled JS harder to read for everyone else.
> npm run build:prod

If you are curious and want to see how the production mode is different to the development mode, feel free to compare the content of ./dist/bundle.js file.

This is great, but how can I see my app in the browser?

Sure, we are going to use webpack-dev-server to display our app on the browser.

Running the app in the browser
webpack-dev-server is a nice tool for development purpose, it will not only run webpack but also serve the files so we can see the app in a web browser. It also enables hot reloading so we can modify any source file and webpack will recompile, bundle it automatically and refreshes the page with the changes without us having to refresh the browser.

Enough said, let’s see it action.

> npm run dev

That’s it the app is now ready to be viewed on a web browser!! go ahead and type http://localhost:8080 on your browser.

Now, let’s try the hot reloading feature; go and change the style.css as follows and save the file :

#hello {
  font-weight: bold;
  color: green;
}

There you go the web page has refreshed automatically and the style of the text has changed. Isn’t that cool :)?

BONUS: serving the files with Express server

If you are like me and want to serve the compiled assets with express server on your local machine, then keep reading. Express is a very powerful webserver and easy to use. Let’s install it.

> npm install -D express@4

• Let’s create a server.js to serve the files from the ./dist folder

Finally, let’s build our app with production mode and serve it locally using Express Server.

• > npm run build:prod
• > npm run start will serve the app at http://localhost:3000

That’s it! you now have a production-grade webpack app running on your local machine.

As I mentioned this was supposed to be a very basic tutorial on webpack, there is a lot more to cover… If I have some time, I might do a second article covering other loaders & plugins in the near future.

Hope you enjoyed this article, if you have any issues, suggestions or if you need clarifications feel free to comment :)

References :

Github: https://github.com/bishesh16/simple-webpack