Webpack Cheat Sheet

Webpack is a popular module bundler for JavaScript applications. It helps manage dependencies, optimize assets, and build a modular structure for web development. Below is a cheat sheet for Webpack configurations and commands:

Basic Commands

Initialize a Project:

npm init -y

Install Webpack Locally:

npm install webpack webpack-cli --save-dev

Create a Basic Configuration File (webpack.config.js):

// webpack.config.js
const path = require('path');

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

Run Webpack:

npx webpack

Asset Management

Loaders for Different File Types:

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

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
};

Plugins

HTMLWebpackPlugin for Generating HTML:

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

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
    }),
  ],
};

CleanWebpackPlugin for Cleaning Output Directory:

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

// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

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

Development Server

Webpack Dev Server:

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

// webpack.config.js
module.exports = {
  devServer: {
    contentBase: './dist',
  },
};

npx webpack serve

Mode and Source Maps

Set Development or Production Mode:

// webpack.config.js
module.exports = {
  mode: 'development',
  // or
  mode: 'production',
};

Source Maps:

// webpack.config.js
module.exports = {
  devtool: 'inline-source-map',
  // or
  devtool: 'source-map',
};

Code Splitting

Dynamic Import for Code Splitting:

// webpack.config.js
module.exports = {
  entry: {
    main: './src/index.js',
    another: './src/another-module.js',
  },
};

// src/index.js
document.getElementById('load').addEventListener('click', () => {
  import('./lazy-loaded-module.js').then(module => {
    // Use module...
  });
});

Module Resolution

Resolve Aliases:

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

// import using alias
import myModule from '@/my-module';

Babel Integration

Babel for ES6+ Transpilation:

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

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

Hot Module Replacement (HMR)

Enable HMR in Development:

// webpack.config.js
module.exports = {
  devServer: {
    hot: true,
  },
};

// src/index.js
if (module.hot) {
  module.hot.accept('./print.js', function () {
    console.log('Accepting the updated print module!');
    print();
  });
}