Webpack is a module bundling system which means a bundler compiles JavaScript written using some kind of module system like AMD, CommonJS, ES6 Module etc into plain JavaScript to run in browser.

The core function of Webpack is that it takes a bunch of JavaScript files we write in our project and turns them into a single, minified file, so that it will be quick to serve.

Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one or more bundles. With plugins and rules, it can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.

Webpack can bundle any kind of file: JavaScript, TypeScript, CSS, SASS, LESS, images, HTML, fonts, whatever. It itself only understands JavaScript files. Teach it to transform non-JavaScript file into their JavaScript equivalents with loaders. When a pattern matches the filename, it processes the file with the associated loader.

• It is NodeJS based tool and works with Node/NPM that reads configuration from a JavaScript commonjs module file
• Open source and Platform independent
• Configured through webpack.config.js
• Mainly used to transpile (compile) JS modules
• Various loaders and plug-ins need to be involved for specific transpilations
• Loaders
  • Loaders are transformations that are applied to the source code of a module. They are written as functions that accept source code as a parameter and return a new version of that code with transformations applied.
• Plugins
  • The plugin interface allows users to tap directly into the compilation process. Plugins can register handlers on lifecycle hooks that run at different points throughout a compilation. When each hook is executed, the plugin will have full access to the current state of the compilation.

• Asset Bundling where webpack bundles all your assets including JavaScript, CSS, and images using loader for each file type
• Tree shaking is a method of optimising our code bundles by eliminating any code from the final file that isn’t actually being used
• Code Splitting to get code from server only when required which enhance the UX of your app
• webpack-dev-server for developer productivity. Auto reload your app in the browser

• Setup React app from scratch using Webpack & Babel
• Webpack-4 course

First, let’s do some installation

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

This will install:

• webpack — which include all core webpack functionality. The CLI to configure and interact with your build. It is simply used to kick off the process using a configuration file and a few flags (e.g. --env).
• webpack-dev-server — it provides live reloading. This development server automatically rerun webpack when our file is changed. This should be used for development only.
• webpack-cli — enable running webpack from the command line

Let’s try to run webpack by adding the following script to package.json

"scripts": {
    "clean": "rimraf dist",
    "start": "webpack-dev-server --mode development",
    "build": "NODE_ENV=production && npm clean && webpack --config webpack.config.js -p"
},

You determine what Webpack does and how it does with a JavaScript configuration file, webpack.config.js.

The configuration imports dependencies with require statements and exports several objects as properties of a module.exports object.

• entry — the entry-point files that define the bundles. Webpack inspects that file and traverses its import dependencies recursively.
• output — the folder path and bundled file-name for output
• devtool — controls if and how source maps are generated. Since webpack bundles the code, source maps are mandatory to get a reference to the original file that raised an error.
• module.rules — is an object with rules for deciding how files are loaded.
• plugins — creates instances of the plugins.

const path = require('path');
const webpack = require('webpack');

const APP_DIR = path.join(__dirname, 'src');
const BUILD_DIR = path.join(__dirname, 'dist');

module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: BUILD_DIR,
        filename: 'app.bundle.js'
    },
    devServer: {
        contentBase: BUILD_DIR,
    },
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
};