New Pretend Meaning

    voog-webpack-plugin

    1.2.0 • Public • Published

    npm size

    voog-webpack-plugin

    This plugin uses Voog API to deploy layouts and assets to Voog.

    ℹ️ Usable with webpack@4

    Why use WebPack

    Voog custom layouts and code editor is a good way to get your designs up and running fast, but once your site grows then the simplicity creates some limitations in how the project is structured, what kind of optimization tools are available and how to continue developing the design.

    With WebPack and VoogWebpackPlugin you can overcome some of these limitations. For example you could add

    1. folder management
    2. branch management - develop layouts/components in git branches and deploy all changes with webpack immediately
    3. cache busting to javscript, css, image and font files
    4. SASS/CSS/JS minification with webpack
    5. critical CSS to your layouts for faster loading
    6. babel so you could use ES6 syntax
    7. or write TypeScript

    ... or implement any webpack plugin.

    Getting Started

    To begin, you'll need to install voog-webpack-plugin:

    $ npm install voog-webpack-plugin --save-dev

    Then add the plugin to your webpack config. For example:

    webpack.config.js

    const VoogWebpackPlugin = require('voog-webpack-plugin');
     
    module.exports = {
      plugins: [
        new VoogWebpackPlugin({
          voogApiHost: 'YOUR_VOOG_API_HOST',
          voogApiToken: 'YOUR_VOOG_API_TOKEN'
        })
      ],
    };

    And run webpack via your preferred method.

    How to use

    The best way to get started is look at the example-project in the same github repository.

    1. Name your layouts filename-layout.tpl and components filename-component.tpl. The plugin will know how to separate these from the file name extensions.

    ℹ️ All files without -layout.tpl or -component.tpl extension will be ignored.

    1. When you start webpack builder then the plugin will download a list of all the files in your Voog server and keeps it in memory. If you have changed a file in your local editor then the plugin will check if the contents is different then what was downloaded from Voog and upload a new version. This will make sure that only the files that have changed are uploaded.

    2. Everything in your webpack build folder will be uploaded to your Voog server. Including layouts, components, images, stylesheets, javascript files, fonts.

    Known Problems

    1. I'm experiencing slow build speed with larger projects

    This is caused by html-webpack-plugin that handles generation of HTML files. The plugin is generating files synchronously and this makes things slow when you have a lot of template files.

    HtmlWebpackPlugin version 4 should fix this issue, but it's still in beta.

    2. I'm getting ["invalid syntax","Syntax error (line 100): Tag '{%=\"\" unless=\"\" editmode=\"\" %}' was not properly terminated with regexp: /\\%\\}/"] (or similar) exception`

    You have probably used Voog specific tags in HTML element attributes. In some cases Voog markup conflicts with HtmlWebpackPlugin.

    This is not allowed: <div {% unless editmode %}class="active"{% endunless%}>Voog is fun</div>. Instead use if/else statement for the full element

      {% if editmode %}
        <div>Voog is fun</div>
      {% else %}
        <div class="active">Voog is fun</div>
      {% endif %}

    An alternative would be to assign class to Voog variable and use it inside the element attribute:

    {% if editmode %}
      {% assign cssClass = 'active' %}
    {% else %}
      {% assign cssClass = 'not-active' %}
    {% endif %}
     
    <div class="{{ cssClass }}}">Voog is fun</div>

    License

    MIT

    Authors

    Messente - Send SMS messages and PIN codes in over 190 countries

    Install

    npm i voog-webpack-plugin

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    19.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • messente.developers