Making your first game on the Phaser. Part 0 - Getting Started

 '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' } ] } };