Skip to main content

Observes the assets directory for html files and copies them into the templates folder.

Project description

lektor-webpack-html-helper

This is a plugin for Lektor that adds support for generating templates with webpacks HtmlWebpackPlugin. These templates can be generated into Lektors assets folder which will be observed for newly created or modified html files. These files will then be copied over to Lektors templates folder so that they can be used by Lektor. This plugin depends on the lektor-webpack-support plugin to be really useful.

webpack/webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");


module.exports = {
    mode: "production",
    entry: {
        main: "./src/index.js"
    },
    output: {
        filename: "[name].bundle.js",
        path: path.dirname(__dirname) + "/assets/generated" 
    },
    optimization: {
        minimizer: [
            new HtmlWebpackPlugin({
                inject: false,
                filename: "layout_generated.html",
                template: "./src/layout_template.html"
            })
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].css"
        })
    ],
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                "sass-loader"
            ]
        }]
    }
}

webpack/src/layout_template.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ this.title }} &middot; {{ config.PROJECT.name }} </title>

    <% for (var css in htmlWebpackPlugin.files.css) { %>
    <link href="{{ '/generated/<%= htmlWebpackPlugin.files.css[css] %>' | asseturl }}" rel="stylesheet">
    <% } %>
</head>

<body>
    <main>
        {% block content %}
        {% endblock content %}
    </main>

    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
    <script src="{{ '/generated/<%= htmlWebpackPlugin.files.chunks[chunk].entry %>' | asseturl }}"></script>
    <% } %>
</body>

</html>

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

lektor-webpack-html-helper-0.1.3.tar.gz (3.3 kB view details)

Uploaded Source

Built Distribution

File details

Details for the file lektor-webpack-html-helper-0.1.3.tar.gz.

File metadata

  • Download URL: lektor-webpack-html-helper-0.1.3.tar.gz
  • Upload date:
  • Size: 3.3 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/1.13.0 pkginfo/1.5.0.1 requests/2.22.0 setuptools/41.0.1 requests-toolbelt/0.9.1 tqdm/4.33.0 CPython/3.8.0b3+

File hashes

Hashes for lektor-webpack-html-helper-0.1.3.tar.gz
Algorithm Hash digest
SHA256 b3069089e9e9af038c69a3185c8ed31253a5fae2941c0164bd1a3c8e3ab3e04a
MD5 b6c161df1cab3cdc77b4832517b29921
BLAKE2b-256 7ff15abb57d0834db5333d27aec1cc983a45c15f0c4fdf0a6ea8ccc35b6187bd

See more details on using hashes here.

File details

Details for the file lektor_webpack_html_helper-0.1.3-py3-none-any.whl.

File metadata

  • Download URL: lektor_webpack_html_helper-0.1.3-py3-none-any.whl
  • Upload date:
  • Size: 3.4 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/1.13.0 pkginfo/1.5.0.1 requests/2.22.0 setuptools/41.0.1 requests-toolbelt/0.9.1 tqdm/4.33.0 CPython/3.8.0b3+

File hashes

Hashes for lektor_webpack_html_helper-0.1.3-py3-none-any.whl
Algorithm Hash digest
SHA256 96f6d50d902883a383bd57c68ba7afe9cab952abd84c84a679dd1ca4e58f8cae
MD5 a1e5aa45e18555df4b48d4b8101a9377
BLAKE2b-256 43d1a401b2c67b4ff2375a302e0709e01b01c411edd2694946b8cc7f03350a3b

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page