HtmlWebpackPlugin erase template div
Date : March 29 2020, 07:55 AM
hop of those help? A typo in the template key in your configuration means that it is using a default template and not the one you were trying to include. The default behavior makes this error difficult to spot.
tempalte : __dirname + '/app/index.html' should be template : __dirname + '/app/index.html'
|
Using nunjucks with htmlWebpackPlugin using dynamic vars in the template
Date : March 29 2020, 07:55 AM
should help you out Alright, so I found a workaround here with the nunjucks-isomorphic-loader which seems not super supported but still. It works for now ! Here's my webPack config const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const DEV_ENV = process.env.NODE_ENV === 'dev'
const wpConfig = {
entry: './assets/js/app.js',
output: {
path: path.resolve('./dist/js'),
filename: 'bundle.js'
},
module: {
rules: [
// Javascript
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader'
}
},
// Nunjucks - HTML
{
test: /\.njk$/,
use: [
{
loader: 'nunjucks-isomorphic-loader',
query: {
root: [path.resolve(__dirname, 'assets/templates')]
}
}
]
}
]
},
plugins: [
new webpack.DefinePlugin({
DEV_ENV: DEV_ENV
}),
new HtmlWebpackPlugin({
myOptions: { foo: 'bar' },
filename: path.join(__dirname, '/' + page.filename),
template: 'assets/templates/index.njk'
})
]
}
module.exports = wpConfig
{% set vars = htmlWebpackPlugin.options.myOptions %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ vars.foo }}</title>
</head>
<body>
<header>
{% block header %}
<h1 class="header-logo">
<a href="#">{{ vars.foo }}</a><!-- Outputs bar -->
</h1>
{% endblock %}
</header>
{% block content %}
{% endblock %}
</body>
</html>
{% extends "_layout.njk" %}
{% block content %}
here's the content of my `foo` var: {{ vars.foo }}
{% endblock %}
|
Write template to disk by HtmlWebpackPlugin when using webpack-dev-server
Date : March 29 2020, 07:55 AM
Hope this helps webpack-dev-server does not write the bundled files to disk, it only reads it from memory. To write the bundled files to disk you have to manually use the webpack --watch in the npm scripts of your package.json such that your start script looks like this "scripts": {
"start": "webpack --watch && webpack-dev-server --progress --colors",
}
|
Use HTMLWebpackPlugin with an EJS file
Date : March 29 2020, 07:55 AM
|
Index.html template isn't loading favicon for HtmlWebpackPlugin
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , HTMLWebpackPlugin will not parse the HTML to find your resources. You'll need to include it like this in your template: index.html <link rel="shortcut icon" href="${require('favicon.ico')}">
{
test: /\.ico$/,
loader: 'file-loader'
}
|
Boards Message :
Related QUESTIONS :