Webpack Installation and Setup

Webpack requires Node.js environment to function properly. Initialize your project and install webpack dependencies:

npm init -y
npm install webpack webpack-cli --save-dev

Webpack can be executed through different methods:

• Global webpack command
• npx webpack (uses local node_modules)
• npm script: "build": "webpack" in package.json

Webpack Configuration File

The standard webpack configuration file (webpack.config.js) defines entry points and output destinations:

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    }
};

Webpack Dependency Graph

Webpack analyzes your application starting from the entry file, discovers all dependencies, constructs a dependency graph, and processes files according to their types using appropriate loaders.

CSS Processing with Loaders

Webpack requires loaders to process CSS files. Install and configure CSS loaders:

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

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

Sass Integration

Extend CSS processing to handle Sass/SCSS files:

npm install sass sass-loader --save-dev

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

PostCSS Configuration

PostCSS processes modern CSS features and adds vendor prefixes:

npm install postcss-loader postcss-preset-env --save-dev

// postcss.config.js
module.exports = {
    plugins: [
        require('postcss-preset-env')
    ]
};

Asset Module Types

Webpack 5 introduces built-in asset handling:

module.exports = {
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                type: 'asset',
                generator: {
                    filename: 'images/[name]_[hash:6][ext]'
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 100 * 1024
                    }
                }
            }
        ]
    }
};

Asset module types include:

• asset/resource: Emits separate files (replaces file-loader)
• asset/inline: Exports data URI (replaces url-loader)
• asset/source: Exports source code (replaces raw-loader)
• asset: Automatically chooses between data URI and file emission

Font File Loading

Handle font files using asset modules:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(eot|ttf|woff2?)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[name]_[hash:6][ext]'
                }
            }
        ]
    }
};

Plugin System

Plugins extend webpack functionality beyond module transformation:

CleanWebpackPlugin

npm install clean-webpack-plugin --save-dev

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
};

HTML and Environment Plugins

npm install html-webpack-plugin --save-dev

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack');

const envVars = {};
Object.keys(process.env).forEach(key => {
    envVars[`process.env.${key}`] = JSON.stringify(process.env[key]);
});

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            title: 'Application'
        }),
        new DefinePlugin({
            ...envVars,
            BASE_URL: '"./"'
        })
    ]
};

CopyWebpackPlugin

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

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

module.exports = {
    plugins: [
        new CopyWebpackPlugin({
            patterns: [{
                from: 'public',
                to: './',
                globOptions: {
                    ignore: ['**/index.html']
                }
            }]
        })
    ]
};

Development Configuration

module.exports = {
    mode: 'development',
    devtool: 'source-map'
};

Babel JavaScript Transpilation

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

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

// babel.config.js
module.exports = {
    presets: ['@babel/preset-env']
};

Babel compilation process:

• Source code parsing
• Abstract Syntax Tree generation
• Transformation via plugins
• Target code generation

Vue.js Application Bundling

npm install vue@next vue-loader@next --save-dev

const { DefinePlugin } = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new DefinePlugin({
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS__: false
        }),
        new VueLoaderPlugin()
    ]
};

Vue distribution variants:

• vue(.runtime).global(.prod).js: Browser script tag usage
• vue(.runtime).esm-browser(.prod).js: Native ES modules
• vue(.runtime).esm-bundler.js: Build tools integration
• vue.cjs(.prod).js: Node.js server-side rendering

Development Server Setup

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

module.exports = {
    target: 'web',
    devServer: {
        host: 'localhost',
        port: 8080,
        open: true,
        hot: true
    }
};

Development server options:

• webpack watch mode
• webpack-dev-server (recommended)
• webpack-dev-middleware

Hot Module Replacement

module.exports = {
    devServer: {
        hot: true
    }
};

import './utils/helpers';

if (module.hot) {
    module.hot.accept('./utils/helpers.js', () => {
        console.log('Hot module replacement applied');
    });
}

Proxy Configuration

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://api.example.com:8080',
                pathRewrite: { '^/api': '' },
                changeOrigin: true,
                secure: false
            }
        }
    }
};

Module Resolutoin

module.exports = {
    resolve: {
        modules: ['node_modules'],
        mainFiles: ['index'],
        extensions: ['.wasm', '.mjs', '.js', '.json'],
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    }
};

Environment-Specific Configurations

npm install webpack-merge --save-dev

// webpack.dev.config.js
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.config');

module.exports = merge(commonConfig, {
    mode: 'development',
    devtool: 'source-map'
});

{
  "scripts": {
    "serve": "webpack serve --config ./webpack.dev.config.js",
    "build": "webpack --config ./webpack.prod.config.js"
  }
}