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