代码之家 › 专栏 › 技术社区 › Sajib Khan

使用Webpack 4预编译nunjucks模板

nunjucks webpack-4 gulp webpack javascript

Sajib Khan · 技术社区 · 6 年前

*.html 文件( nunjucks 模板)&合并到单个 js 文件(例如。模板.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

如何在JS代码中使用Nunjucks模板(主干.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规则/插件配置来完成确切的任务。