https://github.com/oliverepper/lektor-webpack-html-helper
Automatically moves html-files from lektors assets folder into lektors templates folder.
https://github.com/oliverepper/lektor-webpack-html-helper
html-webpack-plugin lektor webpack4
Last synced: 3 months ago
JSON representation
Automatically moves html-files from lektors assets folder into lektors templates folder.
- Host: GitHub
- URL: https://github.com/oliverepper/lektor-webpack-html-helper
- Owner: oliverepper
- Created: 2019-08-11T21:02:13.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-08-19T08:01:35.000Z (almost 7 years ago)
- Last Synced: 2025-10-10T14:27:11.585Z (9 months ago)
- Topics: html-webpack-plugin, lektor, webpack4
- Language: Python
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# lektor-webpack-html-helper
[](https://badge.fury.io/py/lektor-webpack-html-helper)
[](https://pepy.tech/project/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](https://github.com/lektor/lektor-webpack-support) plugin to be really useful.
# webpack/webpack.config.js
```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
```html
{{ this.title }} · {{ config.PROJECT.name }}
<% for (var css in htmlWebpackPlugin.files.css) { %>
<% } %>
{% block content %}
{% endblock content %}
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<% } %>
```
You can configure the following options via `configs/webpack-html-helper.ini`
|parameter |default value |description |
|-----------|-------------------|-----------------------------------------------------------|
|src_dir |/assets |The folder that gets recursively observed by the watchdog. |
|target_dir |/templates/ |Lektors template folder. |