Running webpack-dev-server on a Remote Server with tmux and Basic Bundle Optimization

Remember when you first started using webpack and loved webpack-dev-server for local development? This article shows how to run it on a remote server continuously in the background using tmux, so you can see live progress even during development.

Tmux

One of the terminal utilities that makes running a background process survive after you log out. Install it via apt‑get, yum, Homebrew, etc.

To create a new session:

tmux new -s <session_name>

This opens a new tmux window with the given session name.

Next, navigate to your project directory and start webpack-dev-server. In the package.json scripts you can add a custom command for convenience.

When using Docker or a VM, be sure to include --host 0.0.0.0 and --public <host>:<port> so the server is reachable from outside.

Run the server with:

npm run dev

The server behaves the same as on your local machine.

To detach the tmux session and return to the original terminal, press Ctrl+B then D . The webpack-dev-server keeps running in the background.

To re‑attach to an existing session, list sessions:

tmux ls

and attach:

tmux attach -t <session_name>

If you use iTerm2 on macOS, tmux integrates nicely, allowing you to split windows into multiple panes and manage them with shortcuts.

Webpack

After covering tmux, the article continues with webpack bundle analysis tools and simple optimizations.

1. Analysis tools

Three tools are introduced to reduce bundle size and improve load speed:

analyse – clear view of dependencies.

webpack-chart – visual charts with drill‑down.

webpack-bundle-analyzer – plugin‑based, generates a grid‑style graph.

These tools work by uploading the generated stats.json to their respective websites (except the analyzer, which requires installing the plugin).

2. Simple optimizations

Use Ant Design's on‑demand import.

Apply IgnorePlugin for moment .

Define production mode with DefinePlugin .

Compress with UglifyJsPlugin .

Extract CSS into separate files.

Optionally enable ModuleConcatenationPlugin (effects may be modest).

Images illustrate the results of these optimizations:

Finally, the article notes that further improvements are possible, especially regarding handling of echarts via externals and CDN.

That’s the end of the tutorial.