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

Credits

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