Алексей Немиро

Вы можете добавить синонимы (alias):

module.exports = {
  resolve: {
    alias: {
       // имя синонима: путь
       'style': path.join(__dirname, 'style.override.css'),
       'любоеУдобноеИмяСинонима': path.join(__dirname, 'путь к модулю'),
       'любоеУдобноеИмяСинонима2': 'илиТакЕслиВкорне',
    }
  }
}

И использовать синонимы в коде:

import 'style';
import 'любоеУдобноеИмяСинонима';
require('любоеУдобноеИмяСинонима2');

В webpack.config.js можно добавить любой функционал для получения путей к синонимам, да и в целом можно все что угодно сделать:

var suffix = '.override';

module.exports = {
  resolve: {
    alias: {
       'style': path.join(__dirname, 'style' + suffix + '.css'),
    }
  }
}

Что касается передачи пользовательских переменных через командную строку, то можно попробовать их указывать через SET (если под Windows). Будет что-то типа этого:

SET ANY_NAME="VALUE" && webpack -d --color

Найти переменные можно в process.env. Чтобы сделать вывод переменных в консоль, добавьте в файл webpack.config.js следующую строчку кода:

console.log('process.env', process.env);
console.log('ANY_NAME', process.env.ANY_NAME);

Надеюсь, в app.js сделан require('jquery') :-)

В plugins можно попробовать добавить ProvidePlugin, с указанием альтернативных имен jQuery, чтобы webpack эти имена обрабатывал как jQuery:

plugins: [
  new webpack.EnvironmentPlugin('NODE_ENV'),

  new webpack.ProvidePlugin({
    '$': 'jquery',
    'jQuery': 'jquery'
  })
]

В alias указывать jQuery нет необходимости.

А вот добавление node_modules в modulesDirectories может помочь:

resolve: {
  modulesDirectories: ['./', 'node_modules'],
  // ...
}

Для Bootstrap и Font Awesome есть отдельные загрузчики: bootstrap-loader и font-awesome-loader.

Достаточно просто добавить их в секцию devDependencies в package.json.

В коде инициализации приложения подключить, например так:

require('bootstrap-loader');
require('font-awesome-loader');

Для шрифтов, в webpack.config.js, прописать примерно такие правила:

module {
  loaders: [
    {
      test: /\.woff(.*)$/,
      loader: 'url',
      query: {
        limit: 10000,
        mimetype: 'application/font-woff',
        name: 'fonts/[name].[ext]' // путь output, куда будут скопированы файлы
      }
    },
    {
      test: /\.woff2(.*)$/,
      loader: 'url',
      query: {
        limit: 10000,
        mimetype: 'application/font-woff',
        name: 'fonts/[name].[ext]'
      }
    },
    {
      test: /\.ttf(.*)$/,
      loader: 'url',
      query: {
        limit: 10000,
        mimetype: 'application/octet-stream',
        name: 'fonts/[name].[ext]'
      }
    },
    {
      test: /\.eot(.*)$/,
      loader: 'file',
      query: {
        limit: 10000,
        name: 'fonts/[name].[ext]'
      }
    },
    {
      test: /\.svg(.*)$/,
      loader: 'url',
      query: {
        limit: 10000,
        mimetype: 'image/svg+xml',
        name: 'fonts/[name].[ext]'
      }
    }
  ]
}

Если понадобится выделить CSS из JavaScript, то можно использовать extract-text-webpack-plugin.

webpack.config.js:

var extractTextPlugin = require('extract-text-webpack-plugin');
// ...
module.exports = {
  // ...
  module: {
    loaders: [
      {
        test: /\.scss$/, // для scss
        loader: extractTextPlugin.extract('style', 'css!sass')
      }
    ]
  },

  plugins: [
    new extractTextPlugin('bundle.css') // вынести css в файл bundle.css в папку output
  ]
}

Для копирования других статичных файлов можно использовать copy-webpack-plugin.