Webpack-dev-server serving in different folder than webpack output

Question

This is in my webpack.config.js:

var path = require('path');
module.exports = {
  entry: './src/index.jsx',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    port: 8080
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}

And this is how I run it:

$ webpack-dev-server --watch-poll --progress --colors
$ webpack --progress --colors

The problem I'm having is that webpack-dev-server is serving the bundle file at the root of my folder (not on the build) folder how I would expect. But webpack outputs the bundle file to build/ (how I expect) to.

So I have to change the script scr when I do a build.

Is there a way to solve that? Maybe is just bad configuration on my webpack.config.js.

I'm running ubuntu BTW.

Answer 1

publicPath tells webpack-dev-server where to serve your bundle in memory

output: {
   path: path.resolve(__dirname, 'build'),
   filename: 'bundle.js',
   publicPath: '/build/'
}