App-html-plugin NPM

app-html-plugin

A webpack plugin that generates HTML file for your SPA.
Note: This plugin is mainly designed for Appist stack which aims on a full SPA-API approach and no server-rendering at all.

Features

Generate index.html based on the configuration file .apprc with custom meta/link tags.
Separate the vendor files and include them using link/script tags in the generated index.html.
Able to use with webpack-dev-server or webpack-dev-middleware with hot reloading feature.
Allow to require or import the external vendor libraries in your codebase.
Support cache busting for assets, e.g. images, fonts, css, js and etc.

Prerequisites

Install Node >= 5.6.0

$ brew install node

Install NPM >= 3.8.0

$ npm update -g npm

Installation

Install the plugin via NPM:

$ npm install --save-dev app-html-plugin

How To Use

Step 1: HTML Template Example

Create the HTML template index.html in your project src folder, i.e. PROJECT_ROOT/src/index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Appist Starter Blank</title>
    <base href="/" />
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="keywords" content="appist, react.js" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="transparent" />
    <!--
        For more information, please refer to http://ogp.me/.
    -->
    <!--build:og_meta-->
    <!--
        For more information, please refer to https://developers.facebook.com/docs/sharing/webmasters#markup.
        Facebook Debugger: https://developers.facebook.com/tools/debug
    -->
    <!--build:fb_meta-->
    <!--
        For more information, please refer to https://dev.twitter.com/cards/getting-started.
        Twitter Card Validator: https://cards-dev.twitter.com/validator
    -->
    <!--build:tt_meta-->
    <!--build:favicon-->
    <!--build:apple-touch-icon-->
    <!--build:css-->
</head>
<body>
  <div id="app"></div>
  <!--[if IE]>
  <!--build:es5-shim-->
  <![endif]-->
  <!--build:js-->
</body>
</html>

Step 2: Config File Example

Create the config file .apprc in your project root, i.e. PROJECT_ROOT/.apprc.

Note 1: Please remove the comments if you want to use the example below.
Note 2: Please use relative paths(from the project root) in the config.

{
    // Tell the plugin to read from the `AppHtmlPlugin` config object
    "AppHtmlPlugin": {
        // Only use the config here if you want to bust the assets caching for `og:image`, `og:video` or `og:audio`
        // Inject Open Graph's meta tags, below is just an example
        // For more information, please check out http://ogp.me/
        "ogMeta": {
            "og:url": "https://www.appist.io",
            "og:site_name": "Appist",
            "og:type": "website",
            "og:title": "Appist",
            "og:description": "An opionionated full stack framework for web and hybrid mobile apps.",
            "og:image": "src/social_cover.jpg"
        },

        // Inject Facebook's meta tags, below is just an example
        // For more information, please check out https://developers.facebook.com/docs/sharing/webmasters#markup
        "fbMeta": {
            "fb:app_id": "112329381123"
        },

        // Only use the config here if you want to bust the assets caching for `twitter:image` or `twitter:player`
        // Inject Twitter's meta tags, below is just an example
        // For more information, please check out https://dev.twitter.com/cards/getting-started
        "ttMeta": {
            "twitter:card": "summary",
            "twitter:site": "appist",
            "twitter:title": "Appist",
            "twitter:description": "An opionionated full stack framework for web and hybrid mobile apps."
        },

        // Inject `<link rel="shortcut icon" href="favicon.ico?HASH" />`
        "favicon": "src/favicon.ico",

        // Inject the apple-touch-icon link tags
        "appleTouchIcons": [
            // `<link rel="apple-touch-icon" href="apple-touch-icon.png?HASH" />`
            {
                "size": "",
                "path": "src/apple-touch-icon.png"
            },

            // `<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png?HASH" />`
            {
                "size": "76x76",
                "path": "src/apple-touch-icon-76x76.png"
            },

            ...
        ],

        // Automatically inject the dependencies from `node_modules` into the HTML as script tags
        // Benefits:
        // 1. Save the hassle to deal with the complicated webpack configuration file
        // 2. A lot more faster for webpack development server as these vendors are referred as external dependencies
        // 3. Able to use es2015 syntax to import the global packages
        "vendors": [
            // Inject `<script src="react.min.js"></script>`
            // global - The library variable in the browser, i.e. `React`
            // import - The library name that is used with es2015 import, i.e. `import react, { Component } from 'react';`
            // script - The library path to include in the browser under the `node_modules` folder
            {
              "import": "react",
              "global": "React",
              "script": "react/dist/react.min.js"
            },

            // Inject `<script src="react-dom.min.js"></script>`
            // global - The library variable in the browser, i.e. `ReactDOM`
            // import - The library name that is used with es2015 import, i.e. `import ReactDOM from 'react-dom';`
            // script - The library path to include in the browser under the `node_modules` folder
            {
              "import": "react-dom",
              "global": "ReactDOM",
              "script": "react-dom/dist/react-dom.min.js"
            },

            ...
        ],

        // Automatically bundle the vendors and only split based on the specified size
        //
        // Scenario #1
        // `a.js`(600KB), `b.js`(100KB), `c.js`(300KB) will generate `vendors1.js`(600KB) and `vendors2.js`(400KB)
        //
        // Scenario #2
        // `a.js`(600KB), `b.js`(200KB), `c.js`(600KB) will generate `vendors1.js`(600KB), `vendors2.js`(200KB) and `vendors3.js`(600KB)
        "bundles": {
          // Filename prefix for each bundle file. By default, it is "vendors".
          "prefix": "vendors"

          // Maximum size for each bundle file in KB. By default, it is 500.
          "size": 500
        }
    }
}

Step 3: Webpack Config Example

Configure your webpack config file to use AppHtmlPlugin.

var AppHtmlPlugin = require('app-html-plugin');

module.exports = {
  ...

  plugins: [
    ...

    new AppHtmlPlugin({
      // Specify the config path. By default, it is `.apprc`.
      config: path.resolve(__dirname, '.apprc')

      // Specify the HTML template path. By default, it is `src/index.html`.
      template: path.resolve(__dirname, 'src/index.html')
    }),

    ...
  ],

  ...
};

appist webpack html generate spa

es5-shim lodash url uglify-js

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago