webpack-dev-server watches and compiles files correctly, but browser can't access them

Question

EDIT: Link to github repo where this example is hosted is here in case someone wants to run it

---

I'm getting the near exact same problem as another user (you can find the question here), in that running the webpack-dev-server does actually compile and watch files correctly (seeing the console output in the terminal), but the browser still can't view my site correctly. This is my webpack.config.js file:

var webpack = require('webpack'),
    path = require('path'),
    // webpack plugins
    CopyWebpackPlugin = require('copy-webpack-plugin');

var config = {
    context: path.join(__dirname,'app'),
    entry: './index.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: path.join(__dirname, 'public')
    },
    devServer: {
        // contentBase: './public/'
    },
    plugins: [
        // copies html to public directory
        new CopyWebpackPlugin([
            { from: path.join(__dirname, 'app', 'index.html'),
                to:  path.join(__dirname, 'public')}
        ]),
        // required bugfix for current webpack version
        new webpack.OldWatchingPlugin()
    ],
    module: {
        loaders: [
            // uses babel-loader which allows usage of ECMAScript 6 (requires installing babel-preset-es2015)
            {test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015']}},
            // uses the css-loader (loads css content) and style-loader (inserts css from css-loader into html)
            {test: /\.css$/, loader: 'style!css', exclude: /node_modules/}
        ]
    }
};

module.exports = config;

And this is my directory structure:

+--- webpack/
   +--- app/
      +--- index.html
      +--- index.js
      +--- styles.css
   +--- package.json
   +--- webpack.config.js

Currently, running webpack-dev-server outputs the following in the browser (note the lack of the public/ directory which is where webpack normally outputs my html and javascript bundle):

---

EDIT: Adding the devServer.contentBase property and setting it to public gets the browser to return a 403 error not found as shown here:

Answer 1

Okay, so I was able to reproduce the issue that you have on my project. To fix the issue I changed some things.

Here is what I have set up. I'm defining a bit less in the output and using jsx instead of js, but the results should be the same. You can replace my src with wherever your source code is.

const config = {
    entry: './src/App.jsx',
    output: {
        filename: 'app.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react', 'stage-0'],
                    plugins: ['add-module-exports']
                }
            },
            {
                include: /\.json$/, loaders: ['json-loader']
            },
            {
                test: /\.scss$/,
                loaders: ['style', 'css?modules', 'sass']
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=fonts/[name].[ext]'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            'Promise': 'exports?module.exports.Promise!es6-promise',
            'fetch': 'imports?self=>global!exports?global.fetch!isomorphic-fetch'
        }),
        new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        })
    ],
    resolve: {
        root: path.resolve('./src')
    },
    devServer: {
        contentBase: 'src'
    }
};

So basically you would want this output in terminal:

• webpack result is served from / - tells us that whatever we build from will be at the root
• content is served from src - tells us that it's building from that directory

Hope this helps