WebPack-DEV-серверные часы и компилирует файлы правильно, но браузер не может получить доступ к ним

Question

EDIT: Ссылка на GitHub репо, где этот пример размещен в here в случае, если кто-то хочет, чтобы запустить его

---

Я получаю почти такую ​​же проблему, как и у другого пользователя (вы можете найти вопрос here), поскольку запуск webpack-dev-сервера действительно скомпилирует и будет смотреть файлы правильно (см. Вывод консоли в терминале), но браузер по-прежнему не могут правильно просматривать мой сайт. Это мой 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; 

И это моя структура каталогов:

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

В настоящее время работает webpack-dev-server выводит следующую информацию в браузере (обратите внимание на отсутствие каталога public/ которых где WebPack обычно выводит мой HTML и сверток Javascript):

---

EDIT: Добавление свойства devServer.contentBase и установить его в public получает браузер возвращает ошибку 403 не нашел, как показано здесь:

Answer 1

Хорошо, так что я смог воспроизвести проблему, имеющуюся в моем проекте. Чтобы исправить проблему, я изменил некоторые вещи.

Вот что я установил. Я определяю немного меньше в выходе и использую jsx вместо js, но результаты должны быть одинаковыми. Вы можете заменить мой 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 - говорит нам, что это здание из этого справочника

Надеюсь, что это поможет