Webpack Core Concepts

Webpack bundles multiple static files into one or few bundles.

Under The Hood
Webpack parses the entry file and list's out all the dependency modules and then webpack recursively run through all the dependency modules and its child dependencies and then bundles all of those modules into one or few bundles.
Different webpack configuration files can be created for both development and production and can have a common webpack file which will have common things for both development and production.

Unfolding The Webpack Config File

Entry
The entry point is the starting point of the application bundling process. it can be a simple string to define one path, or can be array of paths, or an object to have multiple entry points.
Note: We should have only entry per page and dynamic modules cannot be provided as entry points.

module.exports = {
  entry: {
    main: './src/index.js'
  }
};

Output
The output property configuration tells webpack how to write the compiled files to disk. we can configure filename property to either single file or multiple files as specified below.
[name] property will be generated from the keys mentioned in entry option.

const path = require('path');

module.exports = {
  //...
  output: {
    filename: '[name].[contenthash].js',
    path: __dirname + '/dist'
  }
};

Loaders
Webpack only understands Javascript and JSON files. Loaders help webpack to process non Javascript file types and convert them into valid modules. The webpack community has built loaders for a wide variety of popular languages and language processors.

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      },
      { 
         test: /\.css$/, 
         use: ["style-loader", "css-loader"]
      },
      { 
         test: /\.scss$/, 
         use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
};

/**
In test property, we provide file name extensions using regex to match files.
$ defines the end of the file name.
**/
/**
loader take priority from left to right.
So first sass-loader converts scss files in to css files.
Then css loader converts css into JavaScript string.
Then style loader injects it to the DOM by adding <style> tag.
**/

Plugins
Plugins give us additional functionality to make things simple. It takes array of plugins as input.

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  //...
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

webpack.config.js

Config file with basic building blocks

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      },
      { 
         test: /\.css$/, 
         use: ["style-loader", "css-loader"]
      },
      { 
         test: /\.scss$/, 
         use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

Happy Coding!