# webpack

***

**1. Bundling a Simple JavaScript Module**

```js
// main.js
export const greet = () => 'Hello, world!';

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

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

**2. Using Loaders to Transform Files**

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

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};
```

**3. Customizing the Build Output**

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

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
  },
};
```

**4. Splitting Code into Chunks**

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

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};
```

**5. Using Plugins to Enhance the Build**

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

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],
};
```

**6. Configuring Development Mode**

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

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

**7. Configuring Production Mode**

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

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

**8. Using Aliases to Resolve Modules**

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

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

**9. Configuring Source Maps**

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

module.exports = {
  devtool: 'source-map',
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
};
```

**10. Using Webpack Dev Server**

```js
// Start webpack-dev-server
npx webpack-dev-server
```

**11. Bundling TypeScript Code**

```js
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const tsLoader = require('ts-loader');

module.exports = {
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'ts-loader',
          },
        ],
      },
    ],
  },
  entry: './main.ts',
};
```

**12. Using a Babel Preset for Modern JavaScript**

```js
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const babelPreset = require('@babel/preset-env');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [babelPreset],
            },
          },
        ],
      },
    ],
  },
  entry: './main.js',
};
```

**13. Bundling Code for Multiple Environments**

```js
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const env = process.env.NODE_ENV;

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

if (env === 'production') {
  config.mode = 'production';
} else {
  config.mode = 'development';
}

module.exports = config;
```

**14. Using a CSS Preprocessor (e.g., Sass)**

```js
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const sassLoader = require('sass-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
            },
          },
        ],
      },
    ],
  },
  entry: './main.scss',
};
```

**15. Using a JavaScript Framework (e.g., React)**

```js
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const reactLoader = require('react-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'react-loader',
          },
        ],
      },
    ],
  },
  entry: './main.jsx',
};
```

**16. Bundling Images**

```js
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const fileLoader = require('file-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images/',
              name: '[name].[ext]',
            },
          },
        ],
      },
    ],
  },
  entry: './main.js',
};
```

**17. Using a Code Splitting Strategy**

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

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'commons',
          chunks: 'all',
        },
      },
    },
  },
  entry: './main.js',
};
```

**18. Using Webpack Hot Module Replacement**

```js
// Start webpack-dev-server with HMR enabled
npx webpack-dev-server --hot
```

**19. Using a Proxy Server for API Calls**

```js
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const proxyMiddleware = require('http-proxy-middleware');

module.exports = {
  devServer: {
    proxy: {
      '/api': 'http://localhost:8000',
    },
  },
  entry: './main.js',
};
```

**20. Using a Custom Loader**

```js
// custom-loader.js
const fs = require('fs');

module.exports = function (content) {
  this.cacheable && this.cacheable();
  const filePath = this.resourcePath;
  const data = fs.readFileSync(filePath, 'utf8');
  return `export default ${JSON.stringify(data)}`;
};

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.custom$/,
        use: [
          {
            loader: path.resolve(__dirname, './custom-loader.js'),
          },
        ],
      },
    ],
  },
  entry: './main.custom',
};
```

**21. Using a Performance Budget**

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

module.exports = {
  performance: {
    hints: 'warning',
    maxAssetSize: 200000, // 200KB
    maxEntrypointSize: 400000, // 400KB
  },
  entry: './main.js',
};
```

**22. Using Tree Shaking**

```js
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          output: {
            comments: false,
          },
        },
      }),
    ],
  },
  entry: './main.js',
};
```

**23. Building a Library**

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: `${libraryName}.js`,
    library: libraryName,
    libraryTarget: 'umd',
  },
};
```

**24. Building a Progressive Web App (PWA)**

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

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      inject: false,
    }),
  ],
  devServer: {
    headers: {
      'Service-Worker-Allowed': '/',
    },
  },
};
```

**25. Advanced Configuration Customization**

```js
// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  entry: './main.js',
  output: {
    publicPath: 'auto',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      remotes: {
        'remote-app': 'remote@http://localhost:8081/remoteEntry.js',
      },
    }),
  ],
};
```