Webpack просто скомпилировать кучу шаблонов Pug для HTML

Я начинаю работать с webpack, но одна вещь, которую я не могу для жизни, - это сделать папку (с возможными вложенными папками), полную шаблонов .pug, и просто скомпилировать их в статический html и поместить их в выходную папку, поддерживая любую структуру вложенных папок для каждого выходного html-файла, который был в папке с исходными шаблонами ...Webpack просто скомпилировать кучу шаблонов Pug для HTML

Я не хочу, чтобы вручную указывать каждого человека. pug file, и я определенно не хочу, чтобы webpack попытался разобрать .pugs в JS, а затем попытаться потребовать/импортировать любой из imgs/fonts и т. д. в файлы мошенников, а затем пожаловаться на него, Im сразу после основного, статического 1 : 1 компиляция, файл мопса в, html-файл. Почему так трудно это сделать?

источник

2017-02-19 Matthew Prasinov

можно с WebPack, но проще использовать 'gulp', если вы не в основном дело с JS-файлов –

идентификатор, а не добавлять глотка и его зависимости в каждом проекте, а также ... вы говорите, что это возможно с веб-пакетом, не могли бы вы уточнить? –

покажите свою существующую конфигурацию webpack. вы можете использовать 'function requireAll (r) {r.keys(). forEach (r); } requireAll (require.context ('./ src', true,/\ .pug $ /)); 'требовать от всех .pug файлов в папке src и настраивать' file-loader' для выполнения копии –

Используйте pug-html-loader, чтобы преобразовать .pug в .html-файл. Используйте file-loader, чтобы скопировать файл в нужное место. Не используйте html-loader, так как вы не хотите обрабатывать ресурсы, используемые сгенерированным файлом.

Вы в конечном итоге что-то вроде этого в правилах погрузчика (непроверенный, WebPack 1 синтаксис, возможно, потребуется настроить его для WebPack 2)

{ 
    test: /\.pug$/, 
    loaders: ['file-loader?name=[path][name].html', 'pug-html-loader?pretty&exports=false'] 
}

Далее вам нужно требовать, чтобы все ваши мопс файлов в вашем файл начального

function requireAll (r) { r.keys().forEach(r); } 
requireAll(require.context('./', true, /\.pug$/));

источник

2017-02-20 03:12:16

Хорошо, ничего себе! Спасибо. –

У меня есть еще один вопрос - скажем, я использую этот 'require.context ('./ pug /', true,/\. Pug $ /)' поэтому его поиск в папке с мошенником, в настоящее время, когда я использую файловый загрузчик с параметр 'name = [путь] [имя] .html', шаблоны попадают в папку с мошенниками в моем каталоге сборки. например, если определенный шаблон шаблона источника находится в '/ pug/home/template.pug', я заканчиваю'/dist/pug/home/template.html', но я хочу, чтобы это было 'dist/home/template.html ' Есть ли способ контролировать, какой [путь] будет выводиться в строке запроса загрузчика файла? –

попробуйте 'file-loader? Name = [path] [name] .html & context =./Pug', вам может потребоваться изменить параметр контекста, чтобы заставить его работать –

Webpack просто скомпилировать кучу шаблонов Pug для HTML

ответ

Смежные вопросы