The webpack-dev-server is a little node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle. It also has a little runtime which is connected to the server via Socket.IO.

Let’s say you have the following config file(webpack.config.js)

var path = require('path');
module.exports = {
  entry:{
    app:['./app/main.js']
  },
  output:{
    path: path.resolve(__dirname, 'build'),
    publicPath:'/assets/',
    filename: 'bundle.js'
  },
}
`</pre>

You have an `app` folder with your initial entry point that webpack will bundle into a `bundle.js` file in the `build` folder.

### Content Base

The webpack-dev-server will serve the files in the **current directory**, unless you configure a specific content base.

<pre>`webpack-dev-server --content-base build/
`</pre>

it will serve you `build` folder.

This modified bundle is served from memory at the relative path specified in `publicPath`. Namely your bundle will be available as `localhost:8080/assets/bundle.js`

### Automatic Refresh

The webpack-dev-server supports multiple modes to automatic refresh pages:

  • Iframe mode(page is embedded in an iframe and reload on change)

  • Inline mode(as a small webpack-dev-server client entry is added to the bundle which refresh the page on change)

    Inline Mode

    To use the inline mode, specify --inline on the command line(you cannot specify it in configuration).

    配置 webpack-dev-server 自动刷新

    `// webpack.config.js
entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    path.resolve(__dirname, 'app/main.js')
  ],
  devServer:{
    historyApiFallback: true,
    hot:true,
    inline:true,
    progress: true
  }
`
    `//package.json

“dev”: “webpack-dev-server –progress –colors –inline –hot –content-base build/“,
“build”: “webpack”

1
2

此时访问 localhost:8080 相当于访问 build/, 所以可以省略 index.html