How to use Webpack or similar tools in Replit

1# Option 1 — Vite (recommended for Replit):
2npm install --save-dev vite @vitejs/plugin-react
3
4# Option 2 — Webpack:
5npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react
6
7# Option 3 — Parcel:
8npm install --save-dev parcel

1// vite.config.js — minimal Vite config:
2import { defineConfig } from 'vite';
3import react from '@vitejs/plugin-react';
4
5export default defineConfig({
6  plugins: [react()],
7  server: {
8    host: '0.0.0.0',
9    port: 3000
10  }
11});
12
13// webpack.config.js — minimal Webpack config:
14const path = require('path');
15const HtmlWebpackPlugin = require('html-webpack-plugin');
16
17module.exports = {
18  entry: './src/index.jsx',
19  output: {
20    path: path.resolve(__dirname, 'dist'),
21    filename: 'bundle.js'
22  },
23  module: {
24    rules: [
25      { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }
26    ]
27  },
28  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
29  devServer: { host: '0.0.0.0', port: 3000 }
30};

1{
2  "scripts": {
3    "dev": "vite",
4    "build": "vite build",
5    "preview": "vite preview --host 0.0.0.0 --port 3000",
6    "start": "vite preview --host 0.0.0.0 --port 3000"
7  }
8}
9
10// For Webpack:
11{
12  "scripts": {
13    "dev": "webpack serve --mode development",
14    "build": "webpack --mode production",
15    "start": "npx serve dist -l 3000"
16  }
17}
18
19// For Parcel:
20{
21  "scripts": {
22    "dev": "parcel src/index.html --port 3000",
23    "build": "parcel build src/index.html --dist-dir dist",
24    "start": "npx serve dist -l 3000"
25  }
26}

1# .replit — configured for Vite
2entrypoint = "src/main.jsx"
3modules = ["nodejs-20:v8-20230920-bd784b9"]
4
5run = "npm run dev"
6onBoot = "npm install"
7
8[nix]
9channel = "stable-24_05"
10
11[deployment]
12build = ["sh", "-c", "npm install && npm run build"]
13run = ["sh", "-c", "npm run start"]
14deploymentTarget = "cloudrun"
15
16[[ports]]
17localPort = 3000
18externalPort = 80
19
20hidden = [".config", "node_modules", "dist"]

1# replit.nix — add system dependencies for build tools
2{ pkgs }: {
3  deps = [
4    pkgs.nodejs-20_x
5    pkgs.nodePackages.typescript-language-server
6    pkgs.python3    # Required by node-gyp for some native modules
7    pkgs.pkg-config # Required by some native build scripts
8  ];
9}

1# Build and verify:
2npm run build
3
4# Check the output:
5ls -la dist/
6
7# Serve the production build locally:
8npm run start