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

edit: link github repo example hosted here in case wants run it

---

i'm getting near exact same problem user (you can find question here), in running webpack-dev-server compile , watch files correctly (seeing console output in terminal), browser still can't view site correctly. 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 public directory         new copywebpackplugin([             { from: path.join(__dirname, 'app', 'index.html'),                 to:  path.join(__dirname, 'public')}         ]),         // required bugfix current webpack version         new webpack.oldwatchingplugin()     ],     module: {         loaders: [             // uses babel-loader allows usage of ecmascript 6 (requires installing babel-preset-es2015)             {test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015']}},             // uses css-loader (loads css content) , style-loader (inserts css css-loader html)             {test: /\.css$/, loader: 'style!css', exclude: /node_modules/}         ]     } };  module.exports = config; 

and directory structure:

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

currently, running webpack-dev-server outputs following in browser (note lack of public/ directory webpack outputs html , javascript bundle):

---

edit: adding devserver.contentbase property , setting public gets browser return 403 error not found shown here:

okay, able reproduce issue have on project. fix issue changed things.

here have set up. i'm defining bit less in output , using jsx instead of js, results should same. can replace src wherever 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 want output in terminal:

• webpack result served / - tells whatever build @ root
• content served src - tells it's building directory

hope helps