Максим

Вот у вас есть директория javascripts - туда складывайте весь JS.
Файлы "сервера" кладите отдельно, вне папки в которой пробегает webpack, либо укажите директорию внутри public/javascript/например_server - как исключение, по которой webpack'у ходить будет не нужно.

p.s. вообще вопрос не самый удачный. Если вы хотите вклинить реакт в уже рабочий проект (например на ROR), то храните как хотите, лишь бы вам было удобно.

Если же проект с нуля, то самая обычная структура, это папка src/ для всех файлов проекта на react, где-то рядом в соседях (или в другой вообще директории) - ваш сервер.

Для первого варианта: попробуйте file-loader (а не просто file).

Для второго варианта: картинку надо брать из public директории.

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/' // название директории
  },

<img src='./static/popup-illustration.png' />

Во втором случае картинка не попадет в webpack, а будет отдана как есть.

Все что нужно для движения, это все, что хотим пропустить через webpack делать с помощью import / require.
<img src={require('path/to/img.jpg')} />

Почитать остальное можно здесь (EN). Там заодно пример и css.

Вам нужен webpack-dev-server на гитхаб пейджс? Если да, то никак.
На github вы можете залить "билд" вашего приложения: то есть вашу index.html + картинки + стили (css) + скрипты (ваш бандл и все что еще нужно из js).
Чтобы получить билд, нужно его собрать. То что в результате сборки будет - это и нужно залить на pages.
Запущенный сервер (на node.js или еще какой) - не будет работать на pages (или есть примеры?)

{
  test: /\.scss$/,
    use: [
        'style-loader',
        'sass-loader', // поменять местами с css-loader
        'css-loader' // поменять местами с sass-loader
    ]
},

Простыми словами так: сначала scss код проходит через sass-loader, потом этот код проходит через css-loader, и это все потом впихивается в style через style-loader. Порядок снизу вверху.

import / export (на худой конец require) - это же все es2015, поэтому просто нужно настроить соответствующий таск с помощью browserify / babel. Можно и с помощью webpack, но это уже считаю "оверхэд", хотя для некоторых задач/людей очень даже подходит и имеет место быть.

// https://stackoverflow.com/questions/36527536/import-and-convert-js-files-using-gulp-babel
var browserify = require('gulp-browserify');
gulp.task('bundle', function() {
    gulp.src('./dist/bar.js') // entry point
        .pipe(browserify())
        .pipe(gulp.dest('./dist'))
});

Webpack 2/3 ?

...
const ExtractTextPlugin = require('extract-text-webpack-plugin');
...
// в секции plugins
plugins: [
...
new ExtractTextPlugin({
      filename: 'style-[contenthash].css',
      disable: false,
      allChunks: false, // true
    }),
...
]

в секции module -> rules (loaders)
...
{
        test: /\.less$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: ['css-loader', 'less-loader'],
          publicPath: '/public', // ваш publicPath
        }),
      },

для чего поддерживается webpack

Думаю, для того, чтобы создатели могли как-то получать деньги.

Webpack "еше один" удобный инструмент для создания файла скриптов/стилей, обработки каким-то образом картинок и прочих возможных дел. Другими словами - еще один удобный инструмент для веб разработки.
Gulp делает примерно тоже самое. Еще из популярного был (и есть) - grunt. Просто три похожих инструмента, каждый со своими плюсами/минусами (как обычно). Так же есть и другие различные менее популярные (на мой взгляд) "сборщики/таск-раннеры".

Npm тут слегка не в тему в этом сравнении. Но если говорить об "удобстве" разработки - то в тему. С npm удобнее) но это пакетный менеджер и его задача отличается от задач webpack/gulp/....

Все просто, у вас два раза есть правило, которое говорит webpack'y обрабатывать scss. Удалите лишнее.
Т.е. в вашем случае, оставьте только с Extract...

На всякий случай, свой кусочек (webpack 2+):

{
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: ['css-loader', 'postcss-loader', 'sass-loader'],
          publicPath: '/public',
        }),
      },

В продакшене вам нужны файл скриптов и стилей.
Следовательно вызываете webpack -p (минус p говорит вебпаку: сгенерируй реальный файл bundle.js и что еще укажете) и готовые файл(ы) кладете себе на сервер/хостинг и тд. Там уже хоть apache, хоть nginx, хоть что угоудно раздающее статику.

Так же можете использовать code splitting (https://toster.ru/answer?answer_id=1010668)

extract-text-plugin

{
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: ['css-loader', 'postcss-loader'],
          publicPath: '/public',
        }),
      }, {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: ['css-loader', 'postcss-loader', 'sass-loader'],
          publicPath: '/public',
        }),
      },