使用Webpack 4预编译nunjucks模板

Question

从Gulp迁移到Webpack（这是Backbone.js应用程序）。我需要将所有 *.html 文件（nunjucks模板）预编译并合并为一个js文件（例如template.min.js）。

如何使用webpack.config.js来做到这一点？

项目结构：

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.js

---

如何将Nunjucks模板用于JS代码（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));
  }
  ...
  ...
});

这是前一个gulp.task来预编译和合并文件：

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
});

我想使用Webpack规则/插件配置来完成确切的任务。