Inline CSS & JS into HTML export template

Previously, the HTML export template `html.hbs` included CDN links
for the HTML and CSS resources.

This commit enables Webpack to create a new `htmlexport.html` at
build-time, which includes all resources inline.
That template is then used as before by the frontend to be populated
with the rendered note content.

The tradeoff is that each exported .html file is about 5.6 MB in size,
as we need to inline all fonts (icons & emojis).

Signed-off-by: David Mehren <git@herrmehren.de>
This commit is contained in:
David Mehren 2021-06-21 20:14:29 +02:00
parent 9498ee6bfe
commit 3b00601872
No known key found for this signature in database
GPG key ID: 185982BA4C42B7C3
5 changed files with 53 additions and 37 deletions

View file

@ -1,5 +1,6 @@
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
name: 'save-as-html',
@ -10,6 +11,14 @@ module.exports = {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader'
}
]
}]
},
output: {
@ -18,8 +27,13 @@ module.exports = {
filename: '[name].js'
},
plugins: [
new MiniCssExtractPlugin({
filename: 'html.min.css'
})
new HtmlWebpackPlugin({
// Load a custom template (uses lodash templating)
template: 'public/views/htmlexport.ejs',
filename: 'htmlexport.html',
inject: false,
cache: false
}),
new MiniCssExtractPlugin({ filename: 'htmlexport.css' })
]
}