Takes your webpack config and creates a development server with hot module reloading and error overlay
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.gitignore
package.json
readme.md

readme.md

Webpack Serve

Takes your webpack config and creates a development server with hot module reloading and error overlay. Built to resemble the experience you get from create-react-app.

Install

npm install --save-dev @unfold/webpack-serve

Usage

In the terminal

Either run $(npm bin)/webpack-serve at the root of your project, or add a "serve": "webpack-serve", to your package.json scripts. All arguments given are passed over to the webpack CLI.

With own express/connect backend

You can import and configure it with your own middleware or server.

import webpackServe from '@unfold/webpack-serve'
import config from '../webpack.config'
import server from './server'

webpackServe(config, {
  server,
  port: 5050,
})

Options

name description default value
port Port used for server 8080
hostname Used by webpack and when opening the application in the browser on start localhost
contentBase Which folder to serve static content from /public
https Serves content with SSL false

Pass them to webpackServe(config, { ...options }) or use PORT=5000 HTTPS=true webpack-serve in the terminal.

Quick example

mkdir my-app && cd my-app
echo "alert('🤓')" > index.js
mkdir public && echo "<script src=build.js></script>" > public/index.html
npm install @unfold/webpack-serve
$(npm bin)/webpack-serve index.js build.js

Copy the above code and run it in your terminal and you'll have a new app up and running. When you want to add webpack loaders or similar, use the webpack CLI options or add a webpack.config.js file.

Example screenshots from console and error overlay

screenshot showing compiled successfully screenshot showing warnings screenshot showing error screenshot showing error overlay

Credits

This project is using multiple utilities from react-dev-utils and the console look is shamelessly copied from the create-react-app console.