Basic Build Process Concepts

Step 1: Initialize a New Project

mkdir my-project
cd my-project
npm init -y

Step 2: Install Dependencies

npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-env
npm install --save-dev css-loader style-loader sass sass-loader
npm install --save-dev html-webpack-plugin mini-css-extract-plugin
npm install --save-dev terser-webpack-plugin css-minimizer-webpack-plugin

Step 3: Create Project Structure

my-project/
├── src/
│   ├── index.js         # Main JavaScript entry point
│   ├── index.html       # HTML template
│   ├── styles/
│   │   └── main.scss    # Main stylesheet
│   ├── components/
│   │   └── example.js   # Component module
│   └── assets/
│       └── logo.png     # Example asset
├── webpack.config.js    # Webpack configuration
├── babel.config.js      # Babel configuration
└── package.json         # Project manifest

Step 4: Configure Babel

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: '> 0.25%, not dead',
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ]
};

Step 5: Configure Webpack

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

// Determine if we're in development or production mode
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  // Entry point for the application
  entry: './src/index.js',
  
  // Output configuration
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: isProduction ? 'js/[name].[contenthash].js' : 'js/[name].js',
    clean: true // Clean the output directory before emit
  },
  
  // Development server configuration
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    hot: true,
    open: true,
    port: 8080
  },
  
  // Determine source map type based on environment
  devtool: isProduction ? 'source-map' : 'eval-source-map',
  
  // Optimization settings
  optimization: {
    minimize: isProduction,
    minimizer: [
      new TerserPlugin(), // Minify JavaScript
      new CssMinimizerPlugin() // Minify CSS
    ],
    // Split code into chunks
    splitChunks: {
      chunks: 'all',
      name: false
    }
  },
  
  // Module rules for different file types
  module: {
    rules: [
      // JavaScript
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      // SCSS/CSS
      {
        test: /\.(scss|css)$/,
        use: [
          // In production, extract CSS to separate files
          // In development, inject CSS into the DOM
          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader', // Process CSS imports
          'sass-loader' // Compile Sass to CSS
        ]
      },
      // Images
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset', // Automatically choose between asset/resource and asset/inline
        parser: {
          dataUrlCondition: {
            // Inline images smaller than 8kb
            maxSize: 8 * 1024
          }
        },
        generator: {
          filename: 'images/[hash][ext][query]'
        }
      },
      // Fonts
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[hash][ext][query]'
        }
      }
    ]
  },
  
  // Plugins
  plugins: [
    // Generate HTML file with injected bundles
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: isProduction ? {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      } : false
    }),
    
    // In production, extract CSS into separate files
    ...(isProduction ? [
      new MiniCssExtractPlugin({
        filename: 'css/[name].[contenthash].css'
      })
    ] : [])
  ],
  
  // Set mode based on environment
  mode: isProduction ? 'production' : 'development'
};

Step 6: Add NPM Scripts

// package.json (scripts section)
"scripts": {
  "start": "webpack serve",
  "build": "NODE_ENV=production webpack",
  "build:dev": "webpack"
}

Step 7: Create Basic Source Files

// src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Project</title>
</head>
<body>
  <div id="app">
    <h1>Hello, World!</h1>
    <div class="container"></div>
  </div>
</body>
</html>

// src/styles/main.scss
$primary-color: #0066cc;
$secondary-color: #f5f5f5;

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 0;
}

#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: $primary-color;
}

.container {
  background-color: $secondary-color;
  padding: 20px;
  border-radius: 4px;
}

// src/components/example.js
export function createGreeting(name) {
  const element = document.createElement('div');
  element.classList.add('greeting');
  element.textContent = `Hello, ${name}!`;
  return element;
}

// src/index.js
import './styles/main.scss';
import { createGreeting } from './components/example';

document.addEventListener('DOMContentLoaded', () => {
  const container = document.querySelector('.container');
  const greeting = createGreeting('Web Developer');
  container.appendChild(greeting);
  
  console.log('Application initialized');
});

Step 8: Run the Build Process

// Development mode with dev server
npm start

// Production build
npm run build