Создание вашей первой игры на Phaser. Часть 0 — Подготовка к работе

'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}  */ function includes(array, searchElement) {   return !!~array.indexOf(searchElement); }  /**  * Создает правила для `expose-loader`, который добавляет модуль к глобальному  * объекту window по переданному имени  * @param  {string} modulePath  * @param  {string} name]  *   * @return {Object}  */ function exposeRules(modulePath, name) {   return {     test: (path) => modulePath === path,     loader: 'expose-loader',     options: name   }; }  /**  * Удаляет из массива все элементы равные `null`  * @param  {T[]} array  *   * @return {T[]}  */ function filterNull(array) {   return array.filter((item) => item !== null); }  /**  * Вызывает функцию `fn`, если `isIt` равет `true`, в противном случае будет  * вызвана функция `fail`.  *   * @param  {boolean}  isIt  * @param  {function} fn  * @param  {function} fail  *  * @return {any}  */ function only(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'       }     ]   } };