のWebPACK-devのサーバーの時計と正しくファイルをコンパイルしますが、ブラウザは

Question

EDITそれらにアクセスすることはできません：リンクGitHubのレポこの例では、ホストされているために誰かが

---

それを実行したい場合にはhereありますwebpack-dev-serverを実行すると実際にコンパイルしてファイルを正しく見ることができます（端末のコンソール出力を見ています）が、別のユーザと全く同じ問題が発生しています（hereという質問があります）。それでも私のサイトを正しく表示することはできません。これは私のwebpack.config.jsファイルです：

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; 

そして、これは私のディレクトリ構造である：（public/ディレクトリの欠如に注意しwebpack-dev-serverは、ブラウザで次の出力実行し、現在

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

ましたWebPACKのは、通常、私のHTMLとJavaScriptの束を出力している）である：

---

EDIT：devServer.contentBaseプロパティを追加し、publicに設定するには403エラーを返すように、ブラウザを取得し、ここで示したように見つかりません：

Answer 1

がわかりましたので、I私のプロジェクトにあなたが持っている問題を再現することができました。問題を解決するために私はいくつかのことを変えました。

これは私が設定したものです。私は出力を少し小さく定義し、jsの代わりにjsxを使用しますが、結果は同じにする必要があります。 srcは、ソースコードがどこにあっても置き換えることができます。

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' 
    } 
}; 

だから、基本的には、端末でこの出力たい：

• webpack result is served from /は - 私たちは根
• content is served from srcになりますからビルドどんなことを教えてくれる - ということを教えてくれるそのディレクトリから構築しています

欲しいのですが