Example Webpack configuration

webpack.config.js

const path = require('path'); // path is a node module
const webpack = require('webpack');
const bundlePath = path.resolve(__dirname, 'dist/'); // __dirname - current folder, full path is ./dist/. Used for absolute paths

module.exports = {
  // Entry это корень дерева зависимостей и он говорит Webpack где начало приложения и где начинать собирать файлы (bundling)
  // Если есть несколько страниц и несколько точек входа, то Webpack будет строить несколько деревьв зависимостей
  entry: './src/index.js',
  // Если есть несколько страниц и несколько точек входа, то Webpack будет строить несколько деревьв зависимостей
  // Например (см. output):
  /*entry: {
    home: './src/index.js',
    feed: './src/feed.js',
  },*/
  // Module helps define how your exported javascript modules are transformed and which ones are included according to the given array of rules
  module: {
    // массив, в котором каждый объект описывает одно правило обработки файлов
    rules: [
      {
        // . соответствует любому знаку, соответсвенно чтобы получить точку \.
        test: /\.(js|jsx)$/,
        // обычно библиотеки написаны на ES5 и компилировать их не нужно
        exclude: /(node_modules|bower_components)/,
        // Loader is a shorthand for the use property, when only one loader is being utilized
        // webpack будет собирать скрипты при помощи babel-loader. Не забыть установаить babel-core и настроить на использование определенного preset
        loader: 'babel-loader',
        options: { presets: ['env'] }
      },
      {
        test: /\.css$/,
        // css-loader загружает css файл, считывает в строку и создает js файл, который экспортирует этот модуль
        // style-loader берет уже экспортированные стили и подключает в тэг head
        // порядок загрузчиков важен, они применяются в обратном порядке по сравнению с записью
        use: [ 'style-loader', 'css-loader' ]
      }/* ,
      {
        test: /\.(png|jpg|jpeg|gif|svg|pdf)$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      } */
    ]
  },
  // Resolve property allows to specify which extensions Webpack will resolve  —  this allows to import modules without needing to add their extensions
  resolve: { extensions: ['*', '.js', '.jsx'] },
  // Output property tells Webpack where to put bundled code
  output: {
    // The publicPath property specifies what directory the bundle should go in, and also tells webpack-dev-server where to serve files from
    publicPath: bundlePath,
    filename: 'bundle.js'
    // в случае с несколькими бандлами name заменяется на ключ в объкете entry
    /*filename: '[name].js'*/
  },
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    port: 3000,
    // This publicPath tells the server where bundled code actually is
    publicPath: 'http://localhost:3000/dist'
  },
  // Since we want to use Hot Module Replacement so we don’t have to constantly refresh to see our changes
  // плагины в отличии от загрузчиков действуют на уровне всего бандла и могут действовать в люой момент
  plugins: [
    // Since we want to use Hot Module Replacement so we don’t have to constantly refresh to see our changes
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.IgnorePlugin(requestRegExp, [contextRegExp]),
  ]
};