Create your first Phaser game. Part 0 - Getting Ready

'use strict';
/** Requires */const path                  = require('path');
const webpack               = require('webpack');
const CleanWebpackPlugin    = require('clean-webpack-plugin');
const HtmlWebpackPlugin     = require('html-webpack-plugin');
const ExtractTextPlugin     = require('extract-text-webpack-plugin');
const CheckerPlugin         = require('awesome-typescript-loader').CheckerPlugin;
const ImageminPlugin        = require('imagemin-webpack-plugin').default;
const p                     = require('./package.json');
/** Constants */const IS_PRODUCTION     = process.env.NODE_ENV === 'production';
const assetsPath        = path.join(__dirname, 'assets/'); // папка с ресурсами игрыconst stylesPath        = path.join(__dirname, 'styles/'); // папка с css стилями// Путь до папки с собранными билдами phaser. Из-за того, что phaser собирается// по-старинке, его (а также его зависимости) придётся подключать как// глобальный объект.const phaserRoot        = path.join(__dirname, 'node_modules/phaser/build/custom/');
// Пути до библиотек phaser'аconst phaserPath        = path.join(phaserRoot, 'phaser-split.js');
const pixiPath          = path.join(phaserRoot, 'pixi.js');
const p2Path            = path.join(phaserRoot, 'p2.js');
// Папка, в которую у будет собран наш билдconst outputPath        = path.join(__dirname, 'dist');
// Путь до шаблона `index.html` файлеconst templatePath      = path.join(__dirname, 'templates/index.ejs');
/** Helpers *//**
 * Проверяет, содержит ли массив данный элемент
 * @param  {T[]}  array
 * @param  {T}    searchElement
 * 
 * @return {boolean}
 */functionincludes(array, searchElement) {
  return !!~array.indexOf(searchElement);
}
/**
 * Создает правила для `expose-loader`, который добавляет модуль к глобальному
 * объекту window по переданному имени
 * @param  {string} modulePath
 * @param  {string} name]
 * 
 * @return {Object}
 */functionexposeRules(modulePath, name) {
  return {
    test: (path) => modulePath === path,
    loader: 'expose-loader',
    options: name
  };
}
/**
 * Удаляет из массива все элементы равные `null`
 * @param  {T[]} array
 * 
 * @return {T[]}
 */functionfilterNull(array) {
  return array.filter((item) => item !== null);
}
/**
 * Вызывает функцию `fn`, если `isIt` равет `true`, в противном случае будет
 * вызвана функция `fail`.
 * 
 * @param  {boolean}  isIt
 * @param  {function} fn
 * @param  {function} fail
 *
 * @return {any}
 */functiononly(isIt, fn, fail) {
  if (!isIt) {
    return fail !== undefined ? fail() : null;
  }
  return fn();
}
/**
 * Хелпер на основе `only`. Вызывает первую функцию, если
 * `NODE_ENV` === 'production', т.е. если сборка производится для продакшена.
 * @param  {function} fn
 * @param  {function} fail
 *
 * @return {any}
 */const onlyProd = (fn, fail) => only(IS_PRODUCTION, fn, fail);
/**
 * Хелпер на основе `only`. Вызывает первую функцию, если
 * `NODE_ENV` !== 'production', т.е. если сборка производится для разработки.
 * @param  {function} fn
 * @param  {function} fail
 *
 * @return {any}
 */const onlyDev = (fn, fail) => only(!IS_PRODUCTION, fn, fail);
module.exports = {
  entry: {
    main: path.join(__dirname, 'src/index.ts')
  },
  output: {
    path: outputPath,
    // На продакшене также добавим к именам файлов их хещ, чтобы обойти// проблему с кешированием версий
    filename: `js/[name]${onlyProd(() => '.[chunkhash]', () => '')}.js`,
    chunkFilename: `js/[name]${onlyProd(() => '.[chunkhash]', () => '')}.chunk.js`,
    sourceMapFilename: '[file].map',
    publicPath: '/'
  },
  devtool: onlyDev(() =>'source-map', () => ''), // Отключим sourcemap'ы на проде.
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      pixi:   pixiPath,     // сделаем возможным подключить 'pixi' библиотеку как обычный NPM пакет
      phaser: phaserPath,   // сделаем возможным подключить 'phaser' библиотеку как обычный NPM пакет
      p2:     p2Path,       // сделаем возможным подключить 'p2' библиотеку как обычный NPM пакет
      assets: assetsPath,   // алиас до папки `assets/`
      styles: stylesPath    // алиас до папки `styles/`
    }
  },
  plugins: filterNull([
    /** DefinePlugin */// Глобальные переменные, будт полезны для отключения каких-либо функций на// проде, или напротив включения оптимизаторов и пр.new webpack.DefinePlugin({
      IS_PRODUCTION:  JSON.stringify(IS_PRODUCTION),
      VERSION:        JSON.stringify(p.version)
    }),
    /** JavaScript */// Минимизирует JS для продовой сборки
    onlyProd(() =>new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      comments: false
    })),
    /** Clean */// Удалит `dist` папку перед каждой сборкойnew CleanWebpackPlugin([outputPath]),
    /** TypeScript */new CheckerPlugin(),
    /** Images */// Оптимизирует изображения и svg'хи
    onlyProd(() =>new ImageminPlugin({
      test: /\.(jpe?g|png|gif|svg)$/
    })),
    /** Template */// Данный плагин автоматически сгенерирует для нас `index.html` файл// на основе `templatePath`, а также сам вставит в этот шаблон все// сгенерированные скрипты и стилиnew HtmlWebpackPlugin({
      title:    'Phaser TypeScript boilerplate project',
      template: templatePath
    }),
    /** CSS */// Экспортирует CSS import'ы в отдельный `.css` файл (по-умолчанию Webpack// вставляет CSS прямо в JS файлы).new ExtractTextPlugin({
      filename: `css/[name]${onlyProd(() => '.[chunkhash]', () => '')}.css`
    }),
    /** Chunks */// Разобьем нашу сборку на несколько файлов (т.к. вендорные файлы и файлы// самого phaser'а вряд ли будут меняться в процессе разработки, нет нужды// заставлять наших клиентов тянуть каждый раз эти данные заново. Чанки как// раз помогут в этом, браузер сможет доставать из кеша файлы, которые не// поменялись)://   * Чанк для прочих модулейnew webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: (module) => /node_modules/.test(module.resource)
    }),
    //   * Чанк для phaser модулей (p2, PIXI, phaser)new webpack.optimize.CommonsChunkPlugin({
      name: 'phaser',
      minChunks: (module) => includes([p2Path, pixiPath, phaserPath], module.resource)
    }),
    //   * Чанк для инициализационных функций webpack'аnew webpack.optimize.CommonsChunkPlugin({
      name: 'commons'
    })
  ]),
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8080,
    inline: true,
    watchOptions: {
      aggregateTimeout: 300,
      poll: true,
      ignored: /node_modules/
    }
  },
  module: {
    rules: [
      /** Assets */// Скопирует файлы из asset'ов
      {
        test: (path) => path.indexOf(assetsPath) === 0,
        loader: 'file-loader',
        options: {
          name: `[path][name]${onlyProd(() => '.[sha256:hash]', () => '')}.[ext]`
        }
      },
      /** CSS */
      {
        test: /\.styl$/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'stylus-loader'
          ]
        })
      },
      /** JavaScript */
      exposeRules(pixiPath, 'PIXI'),     // добавит `PIXI` модуль в глобальный объект `window`
      exposeRules(p2Path, 'p2'),         // добавит `p2` модуль в глобальный объект `window`
      exposeRules(phaserPath, 'Phaser'), // добавит `Phaser` модуль в глобальный объект `window`
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'awesome-typescript-loader'
      }
    ]
  }
};