Precompile nunjucks templates using Webpack 4
1
Moving from Gulp to Webpack (it's a Backbone.js app). I need to precompile all the *.html files (nunjucks templates) & concat into a single js file (e.g. template.min.js).
How can I do that using webpack.config.js?
Project structure:
js/
apps/
app.js
views/
v1.js // from here using templates, not by require
v2.js
templates/
t1.html // these are nunjucks files
t2.html
webpack.config.jsHow using Nunjucks templates into JS codes (Backbone.js)?
module.exports = Backbone.View.extend({
t1Tpl: 't1.html', // template file path into templates/ directory
el: 'body',
...
...
render() {
$('body').html(global.nunjucksEnv.render(this.t1Tpl));
}
...
...
});this was the previous gulp.task to precompile & concat the file:
const nunjucks = require('gulp-nunjucks');
...
...
gulp.task('templates', function() {
return gulp.src(paths.templates.files) // get all the templates/**/*.html files
.pipe(nunjucks()) // precompile
.pipe(concat('templates.min.js')) // concat into a single templates.min.js file
});I want to do the exact task using Webpack Rules/Plugins configs.
javascript webpack gulp webpack-4 nunjucks
asked Nov 20 '18 at 6:23
Sajib KhanSajib Khan
11.2k42942
add a comment |
1
Moving from Gulp to Webpack (it's a Backbone.js app). I need to precompile all the *.html files (nunjucks templates) & concat into a single js file (e.g. template.min.js).
How can I do that using webpack.config.js?
Project structure:
js/
apps/
app.js
views/
v1.js // from here using templates, not by require
v2.js
templates/
t1.html // these are nunjucks files
t2.html
webpack.config.jsHow using Nunjucks templates into JS codes (Backbone.js)?
module.exports = Backbone.View.extend({
t1Tpl: 't1.html', // template file path into templates/ directory
el: 'body',
...
...
render() {
$('body').html(global.nunjucksEnv.render(this.t1Tpl));
}
...
...
});this was the previous gulp.task to precompile & concat the file:
const nunjucks = require('gulp-nunjucks');
...
...
gulp.task('templates', function() {
return gulp.src(paths.templates.files) // get all the templates/**/*.html files
.pipe(nunjucks()) // precompile
.pipe(concat('templates.min.js')) // concat into a single templates.min.js file
});I want to do the exact task using Webpack Rules/Plugins configs.
javascript webpack gulp webpack-4 nunjucks
asked Nov 20 '18 at 6:23
Sajib KhanSajib Khan
11.2k42942
From the top of my head I don't know whether there is a way to accomplish this (there surely is), but even if there is one, it wouldn't be "idiomatic webpack". What speaks against loading the template via the nunjucks-loader and require instead of stating the filename in the View (t1Tpl: require('nunjucks!./views/t1.html'))? It would even add the benefit of compile time errors if the template file name has a typo in the backbone view.
– Johannes Reuter
Nov 20 '18 at 8:59
ok, then I've to do lots of change in every view file (I've thousands of view files & every file has multiple templates). It would be great if I can do this without changing in view files!
– Sajib Khan
Nov 20 '18 at 9:08
1
Couldn't this be achieved mostly by search/replace? ReplaceTpl: 'byTpl: require('...
– Johannes Reuter
Nov 20 '18 at 9:17
I need precompiled*.jsfile. If I dorequire('...'), it's not working withglobal.nunjucksEnv.render(this.t1Tpl)command.
– Sajib Khan
Nov 20 '18 at 10:00
Yes, theglobal.nunjucksEnv.renderhas to be slightly adjusted. It just has to call.render(params)on the passed parameterthis.t1Tplas described in tje docs of nunjuck-loader:var tpl = require('./views/page.njk'); var html = tpl.render({ message: 'Foo that!' });
– Johannes Reuter
Nov 20 '18 at 12:25
add a comment |
1
1
1
Moving from Gulp to Webpack (it's a Backbone.js app). I need to precompile all the *.html files (nunjucks templates) & concat into a single js file (e.g. template.min.js).
How can I do that using webpack.config.js?
Project structure:
js/
apps/
app.js
views/
v1.js // from here using templates, not by require
v2.js
templates/
t1.html // these are nunjucks files
t2.html
webpack.config.jsHow using Nunjucks templates into JS codes (Backbone.js)?
module.exports = Backbone.View.extend({
t1Tpl: 't1.html', // template file path into templates/ directory
el: 'body',
...
...
render() {
$('body').html(global.nunjucksEnv.render(this.t1Tpl));
}
...
...
});this was the previous gulp.task to precompile & concat the file:
const nunjucks = require('gulp-nunjucks');
...
...
gulp.task('templates', function() {
return gulp.src(paths.templates.files) // get all the templates/**/*.html files
.pipe(nunjucks()) // precompile
.pipe(concat('templates.min.js')) // concat into a single templates.min.js file
});I want to do the exact task using Webpack Rules/Plugins configs.
javascript webpack gulp webpack-4 nunjucks
asked Nov 20 '18 at 6:23
Sajib KhanSajib Khan
11.2k42942
Moving from Gulp to Webpack (it's a Backbone.js app). I need to precompile all the *.html files (nunjucks templates) & concat into a single js file (e.g. template.min.js).
How can I do that using webpack.config.js?
Project structure:
js/
apps/
app.js
views/
v1.js // from here using templates, not by require
v2.js
templates/
t1.html // these are nunjucks files
t2.html
webpack.config.jsHow using Nunjucks templates into JS codes (Backbone.js)?
module.exports = Backbone.View.extend({
t1Tpl: 't1.html', // template file path into templates/ directory
el: 'body',
...
...
render() {
$('body').html(global.nunjucksEnv.render(this.t1Tpl));
}
...
...
});this was the previous gulp.task to precompile & concat the file:
const nunjucks = require('gulp-nunjucks');
...
...
gulp.task('templates', function() {
return gulp.src(paths.templates.files) // get all the templates/**/*.html files
.pipe(nunjucks()) // precompile
.pipe(concat('templates.min.js')) // concat into a single templates.min.js file
});I want to do the exact task using Webpack Rules/Plugins configs.
js/
apps/
app.js
views/
v1.js // from here using templates, not by require
v2.js
templates/
t1.html // these are nunjucks files
t2.html
webpack.config.jsjs/
apps/
app.js
views/
v1.js // from here using templates, not by require
v2.js
templates/
t1.html // these are nunjucks files
t2.html
webpack.config.jsmodule.exports = Backbone.View.extend({
t1Tpl: 't1.html', // template file path into templates/ directory
el: 'body',
...
...
render() {
$('body').html(global.nunjucksEnv.render(this.t1Tpl));
}
...
...
});module.exports = Backbone.View.extend({
t1Tpl: 't1.html', // template file path into templates/ directory
el: 'body',
...
...
render() {
$('body').html(global.nunjucksEnv.render(this.t1Tpl));
}
...
...
});const nunjucks = require('gulp-nunjucks');
...
...
gulp.task('templates', function() {
return gulp.src(paths.templates.files) // get all the templates/**/*.html files
.pipe(nunjucks()) // precompile
.pipe(concat('templates.min.js')) // concat into a single templates.min.js file
});const nunjucks = require('gulp-nunjucks');
...
...
gulp.task('templates', function() {
return gulp.src(paths.templates.files) // get all the templates/**/*.html files
.pipe(nunjucks()) // precompile
.pipe(concat('templates.min.js')) // concat into a single templates.min.js file
});javascript webpack gulp webpack-4 nunjucks
javascript webpack gulp webpack-4 nunjucks
asked Nov 20 '18 at 6:23
Sajib KhanSajib Khan
11.2k42942
asked Nov 20 '18 at 6:23
Sajib KhanSajib Khan
11.2k42942
edited Nov 21 '18 at 4:05
Sajib Khan
asked Nov 20 '18 at 6:23
Sajib KhanSajib Khan
11.2k42942
asked Nov 20 '18 at 6:23
Sajib KhanSajib Khan
11.2k42942
asked Nov 20 '18 at 6:23
Sajib KhanSajib Khan
11.2k42942
11.2k42942
From the top of my head I don't know whether there is a way to accomplish this (there surely is), but even if there is one, it wouldn't be "idiomatic webpack". What speaks against loading the template via the nunjucks-loader and require instead of stating the filename in the View (t1Tpl: require('nunjucks!./views/t1.html'))? It would even add the benefit of compile time errors if the template file name has a typo in the backbone view.
– Johannes Reuter
Nov 20 '18 at 8:59
ok, then I've to do lots of change in every view file (I've thousands of view files & every file has multiple templates). It would be great if I can do this without changing in view files!
– Sajib Khan
Nov 20 '18 at 9:08
1
Couldn't this be achieved mostly by search/replace? ReplaceTpl: 'byTpl: require('...
– Johannes Reuter
Nov 20 '18 at 9:17
I need precompiled*.jsfile. If I dorequire('...'), it's not working withglobal.nunjucksEnv.render(this.t1Tpl)command.
– Sajib Khan
Nov 20 '18 at 10:00
Yes, theglobal.nunjucksEnv.renderhas to be slightly adjusted. It just has to call.render(params)on the passed parameterthis.t1Tplas described in tje docs of nunjuck-loader:var tpl = require('./views/page.njk'); var html = tpl.render({ message: 'Foo that!' });
– Johannes Reuter
Nov 20 '18 at 12:25
add a comment |
From the top of my head I don't know whether there is a way to accomplish this (there surely is), but even if there is one, it wouldn't be "idiomatic webpack". What speaks against loading the template via the nunjucks-loader and require instead of stating the filename in the View (t1Tpl: require('nunjucks!./views/t1.html'))? It would even add the benefit of compile time errors if the template file name has a typo in the backbone view.
– Johannes Reuter
Nov 20 '18 at 8:59
ok, then I've to do lots of change in every view file (I've thousands of view files & every file has multiple templates). It would be great if I can do this without changing in view files!
– Sajib Khan
Nov 20 '18 at 9:08
1
Couldn't this be achieved mostly by search/replace? ReplaceTpl: 'byTpl: require('...
– Johannes Reuter
Nov 20 '18 at 9:17
I need precompiled*.jsfile. If I dorequire('...'), it's not working withglobal.nunjucksEnv.render(this.t1Tpl)command.
– Sajib Khan
Nov 20 '18 at 10:00
Yes, theglobal.nunjucksEnv.renderhas to be slightly adjusted. It just has to call.render(params)on the passed parameterthis.t1Tplas described in tje docs of nunjuck-loader:var tpl = require('./views/page.njk'); var html = tpl.render({ message: 'Foo that!' });
– Johannes Reuter
Nov 20 '18 at 12:25
From the top of my head I don't know whether there is a way to accomplish this (there surely is), but even if there is one, it wouldn't be "idiomatic webpack". What speaks against loading the template via the nunjucks-loader and require instead of stating the filename in the View (
t1Tpl: require('nunjucks!./views/t1.html'))? It would even add the benefit of compile time errors if the template file name has a typo in the backbone view.– Johannes Reuter
Nov 20 '18 at 8:59
From the top of my head I don't know whether there is a way to accomplish this (there surely is), but even if there is one, it wouldn't be "idiomatic webpack". What speaks against loading the template via the nunjucks-loader and require instead of stating the filename in the View (
t1Tpl: require('nunjucks!./views/t1.html'))? It would even add the benefit of compile time errors if the template file name has a typo in the backbone view.– Johannes Reuter
Nov 20 '18 at 8:59
ok, then I've to do lots of change in every view file (I've thousands of view files & every file has multiple templates). It would be great if I can do this without changing in view files!
– Sajib Khan
Nov 20 '18 at 9:08
ok, then I've to do lots of change in every view file (I've thousands of view files & every file has multiple templates). It would be great if I can do this without changing in view files!
– Sajib Khan
Nov 20 '18 at 9:08
1
1
Couldn't this be achieved mostly by search/replace? Replace
Tpl: ' by Tpl: require('...– Johannes Reuter
Nov 20 '18 at 9:17
Couldn't this be achieved mostly by search/replace? Replace
Tpl: ' by Tpl: require('...– Johannes Reuter
Nov 20 '18 at 9:17
I need precompiled
*.js file. If I do require('...'), it's not working with global.nunjucksEnv.render(this.t1Tpl) command.– Sajib Khan
Nov 20 '18 at 10:00
I need precompiled
*.js file. If I do require('...'), it's not working with global.nunjucksEnv.render(this.t1Tpl) command.– Sajib Khan
Nov 20 '18 at 10:00
Yes, the
global.nunjucksEnv.render has to be slightly adjusted. It just has to call .render(params) on the passed parameter this.t1Tpl as described in tje docs of nunjuck-loader: var tpl = require('./views/page.njk'); var html = tpl.render({ message: 'Foo that!' });– Johannes Reuter
Nov 20 '18 at 12:25
Yes, the
global.nunjucksEnv.render has to be slightly adjusted. It just has to call .render(params) on the passed parameter this.t1Tpl as described in tje docs of nunjuck-loader: var tpl = require('./views/page.njk'); var html = tpl.render({ message: 'Foo that!' });– Johannes Reuter
Nov 20 '18 at 12:25
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387348%2fprecompile-nunjucks-templates-using-webpack-4%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387348%2fprecompile-nunjucks-templates-using-webpack-4%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
From the top of my head I don't know whether there is a way to accomplish this (there surely is), but even if there is one, it wouldn't be "idiomatic webpack". What speaks against loading the template via the nunjucks-loader and require instead of stating the filename in the View (
t1Tpl: require('nunjucks!./views/t1.html'))? It would even add the benefit of compile time errors if the template file name has a typo in the backbone view.– Johannes Reuter
Nov 20 '18 at 8:59
ok, then I've to do lots of change in every view file (I've thousands of view files & every file has multiple templates). It would be great if I can do this without changing in view files!
– Sajib Khan
Nov 20 '18 at 9:08
1
Couldn't this be achieved mostly by search/replace? Replace
Tpl: 'byTpl: require('...– Johannes Reuter
Nov 20 '18 at 9:17
I need precompiled
*.jsfile. If I dorequire('...'), it's not working withglobal.nunjucksEnv.render(this.t1Tpl)command.– Sajib Khan
Nov 20 '18 at 10:00
Yes, the
global.nunjucksEnv.renderhas to be slightly adjusted. It just has to call.render(params)on the passed parameterthis.t1Tplas described in tje docs of nunjuck-loader:var tpl = require('./views/page.njk'); var html = tpl.render({ message: 'Foo that!' });– Johannes Reuter
Nov 20 '18 at 12:25