Webpack Basics: Part 2

In second part of webpack investigation we are going to proceed with basic setup and here we are going to cover the following topics:

1. Building multiple files
2. Organizing application
3. Using Style and CSS loaders
4. Exploring Image loader
5. Using SASS loader
6. Mode configurations
7. Using open browser plugin

Building multiple files

There is two ways to include new javascript files into application bundle.

1. Use import in main or related javascript file
2. Include new javascript to webpack config file

Let’s explore them one by another:

1. Add new script into root directory

touch script-2.js

script-2.js content:

export function sayHello() {
  console.log('Hello from Script 2');
}

2. Include script to main file in current case it’s script.js

import { sayHello } from './script-2';
console.log('Hello Webpack World!');
sayHello();

here is the result:

Second way is to configure Webpack config file

1. Add one more javascript file with name script-3.js

touch script-3.js

script-3.js content:

console.log('Hello from Script 3');

2. Update entry property in webpack.config.js

...
entry: [
  './script',
  './script-3'
],
...

Here we can see that all scripts are working as expected.

Organizing application

I was waiting for that moment because for now we were working with mess.

1. Create js and public folder in root directory:

mkdir js && mkdir public

2. Move all javascript files to js folder and index.html to public

3. Add to webpack.config.js base directory (absolute path!) for resolving the entry option.

...
context: path.resolve('js'),
...

but do not forget to import above path module

let path = require('path');

4. Update output property in webpack.config.js

...
output: {
  path: path.resolve('build/js/'),
  publicPath: '/public/assets/js/',
  filename: "./bundle.js"
},
...

path: The output directory as an absolute path.
publicPath: Specifies the public URL address of the output files when referenced in a browser.

5. Update bundle script path in index.html

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

6. Update devServer contentBase property:

...
devServer: {
  contentBase: 'public',
  port: 3001
},
...

After rebuild you will see that now we are missing image and CSS file but do not worry soon application is going to work again and even better.

Using Style and CSS loader

After reorganization we broke our great styles and now we want to fix them. In order to do that we need to use style-loader and css-loader module.

1. Install style and css loader

npm install style-loader css-loader --save-dev

2. Configure style & css loader in webpack.config.js

...
module: {
  rules: [{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
  }]
},
...

3. Remove style link tag from head in index.html

4. Create css folder in root directory

mkdir css

5. Move style.css file into css

6. Import style.css file in script.js file

import '../css/style.css';

Image Loader

1. Install file-loader and url-loader module

npm install file-loader url-loader --save-dev

2. Remove all not needed attributes from img tag

<img id="img">

3. Add new rule to webpack.config.js

...
{
  test: /\.(png|jpg|gif)$/,
  use: [{
    loader: 'url-loader',
    options: {
      name: 'img/[hash]-[name].[ext]'
    }
  }]
}
...

4. Import image in script.js file

import webpackImg from '../img/webpack.png';

5. Set image src attribute

let webpackElement = document.getElementById('img');
webpackElement.src = webpackImg;

6. Rebuild application

Ok, seems that all is working as was before reorganization

Using SASS loader

Now we are ready for improvements!

1. Install sass-loader and node-sass module

npm install sass-loader node-sass --save-dev

2. Create folder where we will store scss files

mkdir sass

3. Create main.scss file in sass folder

cd sass && touch main.scss

main.scss content:

body {
  p {
    color: brown;
  }
}

4. Import main.scss file in script.js right after style.css

import '../sass/main.scss';

5. Configure webpack.config.js file by adding new rule for sass

{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

6. Rebuild application

New styles are working as expected.

Mode Configurations

One more important feature is mode handling. If you remember from the beginning we set webpack mode property to ‘development’ but it also has a ‘production’ mode.

If mode set to development (as from beginning) bundle.js looks normally but if it set to production then bundle.js file will be uglyfied and minified. And that is great because we do not need to create some special logic for handling those operations.

Development mode

Production mode

Using open browser plugin

What it does? It opens a new browser tab when Webpack loads. Very useful if you’re lazy and don’t want to force yourself to open a new tab when Webpack is ready to play!

1. Install open-browser-webpack-plugin module

npm install open-browser-webpack-plugin --save-dev

2. Import OpenBrowserPlugin object

let OpenBrowserPlugin = require('open-browser-webpack-plugin');

3. Add it to plugins list

plugins: [
  new OpenBrowserPlugin({ url: 'http://localhost:3001/index.html' })
]

And now each time when you will be starting webpack browser automatically open you application.

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.