\n\n[](https://travis-ci.com/scriptex/webpack-mpa-next)\n[](https://github.com/scriptex/webpack-mpa-next/actions?query=workflow%3ABuild)\n[](https://www.codacy.com/gh/scriptex/webpack-mpa-next/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/webpack-mpa-next&utm_campaign=Badge_Grade)\n[](https://codebeat.co/projects/github-com-scriptex-webpack-mpa-next-master)\n[](https://www.codefactor.io/repository/github/scriptex/webpack-mpa-next)\n[](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)\n[](https://github.com/scriptex/webpack-mpa-next/)\n\n# Webpack-MPA-Next\n\n> Opinionated multiple page application setup with Webpack using SASS, PostCSS, ES2017, PNG & SVG Sprites and more.\n\nThis boilerplate is suitable for static web applications, WordPress websites, etc.\n\n## Visitor stats\n\n\n\n\n\n\n## Code stats\n\n\n\n\n\n\n\n## Dependencies\n\nIn order to use this setup you need to have installed the following dependencies:\n\n1. Node - min v8.9.4 - LTS recommended\n2. NPM - min v5.6.0\n or\n3. Yarn - min v1.3.2\n4. Bash terminal (Default on OSX/Linux, GitBash or similar on Windows)\n\n## Default setup\n\nThe default setup uses PHP files, but you can easily switch to a file format of your choice.\n\nAlso, you can always switch to another file/folder structure if the current one does not suit you.\n\nJust keep in mind that the styles should be located in `assets/styles` and the scripts should be located in `assets/scripts`.\n\n## Zero config and fast installation\n\nNavigate to your new project's folder and execute the following command:\n\n```sh\nnpx webpack-mpa-next && npm i && npm start\n```\n\nThis will install Webpack-MPA in your project folder and you will be able to start right away.\n\n## Download\n\nYou can download this setup [directly](https://github.com/scriptex/webpack-mpa-next/archive/postcss.zip) and extract it.\n\nor use NPM or Yarn to install it:\n\n```sh\nnpm i webpack-mpa-next\n```\n\nor\n\n```sh\nyarn add webpack-mpa-next\n```\n\nThen navigate to the `webpack-mpa-next` folder and proceed with the rest of the instructions.\n\n## Global installation\n\nIt is possible to use the CLI tool included in Webpack MPA Next. In order to do this you must install Webpack MPA Next globally:\n\n```sh\nnpm i webpack-mpa-next -g\n```\n\nor\n\n```sh\nyarn global add webpack-mpa-next\n```\n\nThe `wmpan` binary is now available for you to use.\n\nGo to your new project folder and execute\n\n```sh\nwmpa\n```\n\nYour new project is setup!\n\n## Install dependencies\n\n```sh\nyarn\n```\n\nor\n\n```sh\nnpm i\n```\n\n## Develop\n\n```sh\nyarn start\n```\n\nor\n\n```sh\nnpm start\n```\n\n## Build\n\n```sh\nyarn build\n```\n\nor\n\n```sh\nnpm run build\n```\n\n## Details\n\n1. [PostCSS](http://postcss.org/) stylesheets pre and postprocessing\n\n - PostCSS entry point is `main.css` located in `assets/styles`\n - The whole stylesheets file/folder structure is up to you\n - [ITCSS](https://github.com/scriptex/itcss) boilerplate used as a starting point.\n - Glob import in CSS thanks to [postcss-easy-import](https://github.com/TrySound/postcss-easy-import)\n - [url rebase](https://github.com/postcss/postcss-url) - locates and copies assets from `node_modules`\n - [postcss-utilities](https://github.com/ismamz/postcss-utilities) - allows usage of utility mixins such as `clearfix`\n - [flexbox bugs](https://github.com/luisrudge/postcss-flexbugs-fixes) - fixes common flexbox issues on Internet Explorer\n - [css minification](http://cssnano.co/) - minifies the bundles stylesheet\n - [automatic vendor prefixes](https://github.com/postcss/autoprefixer)\n\n > \"Write your CSS rules without vendor prefixes (in fact, forget about them entirely)\"\n\n - [postcss preset env](https://github.com/csstools/postcss-preset-env) - use tomorrow's CSS syntax, today\n - [postcss nested](https://github.com/postcss/postcss-nested) - use SASS like nesting in CSS\n - [postcss mixins](https://github.com/postcss/postcss-mixins) - PostCSS plugin for mixins\n - [rules merging](https://github.com/ben-eb/postcss-merge-rules)\n\n2. PNG Sprite generating using [Webpack SpriteSmith](https://github.com/mixtur/webpack-spritesmith)\n The default setup includes retina sprite support which means that you should provide a retina version of each png icon.\n\n If you do not wish to use the retina sprite, comment the `@include retina-sprites($retina-groups);` statement in `main.scss` file.\n\n In order to use the PNG sprite, you need to do so by adding the relevant icons in your markup:\n\n ```html\n \n ```\n\n The class name corresponds to the name of the PNG file.\n\n3. Latest EcmaScript support\n\n - Usage of the latest features in EcmaScript\n - Using [Babel](https://github.com/babel/babel) to transpile to ES5\n - Minification of the bundled file\n - Source maps\n\n4. Automatic browser reload using [BrowserSync](https://browsersync.io/)\n\n - The setup assumes that you have a web server (MAMP, XAMPP, etc) installed.\n - If you wish to use a proxy in browsersync you can do it using the `url` CLI argument like this:\n\n ```sh\n yarn start --env url=http://your.app\n ```\n\n or\n\n ```sh\n npm start --env url=http://your.app\n ```\n\n If you do not have a web server installed, then the files can be served via the browser-sync built-in server. In order to use this you need to pass a new CLI argument `server` like this.\n\n ```sh\n yarn start --env server\n ```\n\n or\n\n ```sh\n npm start --env server\n ```\n\n5. SVG Sprite generating using [spritesh](https://www.npmjs.com/package/spritesh)\n\n All svg files located in `assets/images/svg` are merged into a single `sprite.svg` file in `dist` directory.\n\n This action is performed each time the `start` command is invoked.\n\n In order to use the SVG sprite you first need to include it in your markup. You can do so in several ways:\n\n - If you're using PHP files, include it in each of your PHP files: ``\n - If you're using HTML files, paste the content of the SVG sprite in each of your HTML files.\n - If you're using another templating method (posthtml include, handlebars, ejs, etc) you need to do so according to its documentation.\n\n It is preferred to include the SVG sprite right after your opening `` tag\n\n In order to add an SVG icon in your markup, you can do so by using the SVG `
![\"Webpack](\"https://raw.githubusercontent.com/scriptex/webpack-mpa-next/master/webpack-mpa.svg\")
\n\t![\"Zero](\"https://raw.githubusercontent.com/scriptex/webpack-mpa-next/master/readme.svg\")
\n\t