At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

This is a basic guide to help you get started with webpack v4. If you're interested, there is also a cheat sheet for rollup.js

Install the package

npm install webpack webpack-cli --save-dev

Create the scripts in your pacakge.json file.

...

scripts: {
  "webpack-dev": "webpack --mode=development",
  "webpack-prod": "webpack --mode=production",
  "webpack-watch": "webpack --watch"
}

...

Create webpack.config.js file

const path = require('path');

module.exports = {
  // watch: true, we can enable watch via config too
  // mode: 'production', we can change the mode via config too
  entry: './src/my-entry-file.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'my-bundle-name.js'
  }
};

Run the commands

## build bundles without minification (dev environment)
npm run webpack-dev

## build bundles with minification (prod environment)
npm run webpack-prod

## compile on save
npm run webpack-watch

Multiple entries

const path = require('path');

module.exports = {
  entry: {
    home: './src/home.js',
    contact: './src/contact.js'
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].js'
  }
};

The config above tells the webpack to create home.js and contact.js files.

Loaders

Loaders allow webpack to process other types of files and convert them into valid modules.

Babel

Install the required packages.

npm install @babel/core babel-loader @babel/preset-env --save-dev

In webpack.config.js add module section.

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader"
      }
    }]
  }
};

Create .babelrc file.

{
  "presets": ["@babel/env"]
}

CSS

Install the packages

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

In webpack.config.js update the module section.

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

This enables you to import your styles within the JavaScript files

import './main.css'

Images

Install the packages

npm install url-loader --save-dev

In webpack.config.js update the module section.

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.(png|jp(e*)g|svg|gif)$/,
      use: [{
        loader: 'url-loader',
        options: {
        limit: 8000, // Convert images smaller than 8kb to base64 strings
          name: 'images/[hash]-[name].[ext]'
        }
      }]
    }]
  }
};

Plugins

Copy Webpack Plugin

This plugin is useful for copying images from source to public folder for example.

Install the packages

npm install copy-webpack-plugin --save-dev

In webpack.config.js add plugins section.

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  ...
  plugins: [
    new CopyWebpackPlugin([
      { from: './src/images', to: 'images' }
    ])
  ]
};

This will tell the webpack to copy the images from the source to the destination folder.

If you liked this quick guide, do share it and show me some love by buying me a coffee.

To stay tuned for future articles and cheat sheets, subscribe here or follow me on twitter.