Webpack - Dev Server

About

The WebPack dev is a little Node.js Express web server that implements live-reloading

Starting

Manually

In the root directory (where your WebPack - webpack.config.js is), run:

node_modules/.bin/webpack-dev-server

This will start a server, listening on connections from localhost on port 8080.

As Node Script

As npm script

{
   // ............
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "d3": "^4.10.2"
  },
  "devDependencies": {
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  }
}

Then:

npm start

Configuration

const path = require('path');

module.exports = {
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 9000
    }
}

where a web server will be started:

  • in the dist directory
  • on the port 9000
  • with compression on.

Documentation / Reference





Discover More
D3 Documentation Vscode
D3 - Dev Installation

This article describe a dev environment installation with: Webpack for Hot reloading D3 Documentation in the IDE The work and scripts are also available on GitHub. gerardnico/create-d3-app HTML...
Vscode Source Map Pb
Javascript - Source Map (Map File)

A source map provides a mapping between the original and the build source code. The bundler that combined/minified the source code creates the source map debug session The location coordinates are by...
Web - (Hot|Live) (Edit|Reload) - Auto File Sync

Live reloading (ie File sync) in the web means that the Browser automatically update/refresh the HTML page when you change files in your project (HTML, CSS, images, ...) Reload the page at interval:...
WebPack - Proxy

The proxy configuration of the dev server is useful for backend integration. Because Webpack passes all the proxy configuration to http-proxy-middleware,...



Share this page:
Follow us:
Task Runner