Have ideas to improve npm?Join in the discussion! »

    webpack-mpa-next

    3.7.1 • Public • Published
    Webpack MPA Logo

    Zero config and fast installation: Run `npx webpack-mpa && npm i && npm start` in your terminal.

    GitHub release GitHub issues GitHub last commit Build Status Build Status npm npm Analytics

    Webpack-MPA-Next

    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 - 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:

    npx webpack-mpa-next && 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 and extract it.

    or use NPM or Yarn to install it:

    npm i webpack-mpa-next

    or

    yarn add webpack-mpa-next

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

    Global installation

    It is possible to use the CLI tool included in Webpack MPA Next. In order to do this you must install Webpack MPA Next globally:

    npm i webpack-mpa-next -g

    or

    yarn global add webpack-mpa-next

    The wmpan binary is now available for you to use.

    Go to your new project folder and execute

    wmpa

    Your new project is setup!

    Install dependencies

    yarn

    or

    npm i

    Develop

    yarn start

    or

    npm start

    Build

    yarn build

    or

    npm run build

    Details

    1. PostCSS stylesheets pre and postprocessing

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

      In order to use the PNG sprite, you need to do so by adding the relevant icons in your markup:

      <i class="ico-home"></i>

      The class name corresponds to the name of the PNG file.

    3. Latest EcmaScript support

      • Usage of the latest features in EcmaScript
      • Using Babel to transpile to ES5
      • Minification of the bundled file
      • Source maps
    4. Automatic browser reload using BrowserSync

      • The setup assumes that you have a web server installed.
      • If you wish to use a proxy in browsersync you can do it using the url CLI argument like this:
      yarn start --url=http://your.app

      or

      npm start -- --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.

      yarn start --server

      or

      npm start -- --server
    5. Images optimization using Optisize

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

      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: <?php include_once('assets/dist/sprite.svg'); ?>
      • 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 <body> tag

      In order to add an SVG icon in your markup, you can do so by using the SVG <use> tag:

      This action is performed each time the start command is invoked.

      <svg class="svg-home">
      	<use xlink:href="#svg-home"></use>
      </svg>
    7. 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 raw 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 --mode=production",
    	"start": "webpack --watch --mode=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.

    Public vs. private projects

    This starter boilerplate is licensed under the MIT open source license and is publicly available.

    If you intend to use it to create a private and closed source project, please make sure to delete the license field in the package.json file and add "private": true in the same file.

    This will make sure that you don't accidentally use an open source license for your private/closed source project.

    Support this project

    Tweet Donate Become a Patron

    LICENSE

    MIT

    Install

    npm i webpack-mpa-next

    DownloadsWeekly Downloads

    28

    Version

    3.7.1

    License

    MIT

    Unpacked Size

    574 kB

    Total Files

    46

    Last publish

    Collaborators

    • avatar