# 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.

# Dependencies

In order to use this setup you need to have installed the following dependencies:

1. Node - min v8.9.4
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.

# Download

You can download this setup directly and extract it.

or use NPM or Yarn to install it:

npm i webpack-mpa

or

yarn add webpack-mpa

Then navigate to the webpack-mpa folder and proceed with the rest of the instructions.

# Install

yarn

or

npm i

# Develop

yarn start

or

npm start

# Build

yarn build

or

npm run build

# Details

1. SASS stylesheets preprocessing

• The SASS file/folder structure utilizes the ITCSS pattern as shown and explained here
• Glob import in SASS thanks to node-sass-magic-importer

2. PostCSS stylesheets postprocessing including:

• easy importing of non-sass files
• url rebase - locates and copies assets from node_modules
• postcss-utilities - allows usage of utility mixins such as clearfix
• flexbox bugs - fixes common flexbox issues on Internet Explorer
• css minification - minifies the bundles stylesheet
• automatic vendor prefixes

"Write your CSS rules without vendor prefixes (in fact, forget about them entirely)"

3. PNG Sprite generating using 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.

4. Latest EcmaScript support

• Usage of the latest features in EcmaScript
• Using Babel to transpile to ES5
• Minification of the bundled file
• Source maps

5. Automatic browser reload using BrowserSync

• The setup assumes that you have a web server installed. If you do not, then the files will be served via the browser-sync built-in server.
• If you wish to use a proxy in browsersync you can do it using the url CLI argument like this:

yarn start --env.url=http://your.app

or

npm start -- --env.url=http://your.app

6. Images optimization using Imagemin

7. SVG Sprite generating using 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.

8. All front-end assets are stored in an auto-generated dist folder.

# Assets

The assets folder contains several folders:

• images - contains several folders too: _ favicon - contains all icons variations _ sprite - contains png sprite's parts _ svg - contains svg sprite's parts _ temp - contains content images
• scripts - contains the JS modules
• styles - contains the SASS stylesheets

Each start command regenerates the contents of the dist folder.

# Supported Browsers

This setup uses Browserslist to target browsers.

The default list of supported browsers is listed in the package.json file:

{
	"browserslist": ["> 1%", "last 2 versions"]
}

This means that supported browsers vary based on current usage data and current browser versions.

In general, this setup supports the two most recent versions of all browsers.

# Scripts

There are several scripts defined in the package.json file:

{
	"build": "webpack --env.NODE_ENV=production",
	"start": "webpack --watch --env.NODE_ENV=development",
	"optisize": "optisize --src=\"./assets/images\"",
	"html": "php index.php > index.html",
	"critical": "critical index.html > assets/dist/critical.css",
	"rm-html": "rm index.html",
	"pwa": "create-pwa --icon=\"./assets/images/favicon/icon.png\"",
	"prod": "yarn build && yarn html && yarn critical && yarn rm-html"
}

Here is a bit more about what each script does:

1. build: Builds the production version of the javascript and css bundles, regenerates PNG and SVG sprites.
2. start: Starts the development sequence, regenerates PNG and SVG sprites, opens your default browser and watches for changes.
3. optisize: Optimizes your PNG, JPG and GIF images.
4. html: Converts your index.php file to index.html.
5. critical: Using the index.html extracts the critical css and generates a critical.css file in the assets/dist folder which is then inlined in the index.php file.
6. rm-html: Deletes the index.html file.
7. pwa: Generates boilerplate files for a PWA. More info here.
8. prod: Runs 1, 4, 5, 6. (In this exact order).

In order to use the ability to generate critical CSS you must have the php binary exposed in your bash terminal. More about PHP's commandline usage can be found here.

# LICENSE

MIT