Webpack_dev_server

Details

• start express server at localhost 8008 and serve assets out of memory
• uses https://github.com/webpack/webpack-dev-middleware under the hood

Config

devServer.contentBase

link: https://webpack.js.org/configuration/dev-server/#devservercontentbase

• Tell the server where to serve content from. This is only necessary if you want to serve static files. devServer.publicPath will be used to determine where the bundles should be served from, and takes precedence.

Example

var path = require('path');

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

Res

• https://webpack.js.org/configuration/dev-server/#devserver

Options

• --hot: hot module reloading
• --open Open the default browser, or optionally specify a browser name
• --config Path to the config file [string][default: webpack.config.js or webpackfile.js]

Example

  "start": "webpack-dev-server --mode development --open",

Quickstart

npm install webpack-dev-server --save-dev

• cli usage

node_modules/.bin/webpack-dev-server

Use

debug react app

id: 0c1a47d0-b584-4c7c-80c3-6683c6e4a34b

• install debugger for chrome

• add configuration

{
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
    },
    {
        "type": "node",
        "request": "launch",
        "name": "build",
        "program": "${workspaceFolder}/node_modules/.bin/webpack-cli",
        "args": [
          "--config",
          "webpack.config.prod.js"
        ],
        "autoAttachChildProcesses": true,
        "stopOnEntry": true
      }
  ]
}

• start

    "start:alt:debug": "node --inspect-brk ./node_modules/.bin/webpack-dev-server --mode development --open --config example/webpack.config.yaml.js",