Как подключить pug к webpack
Webpack Start Template
Функции и возможности:
Плагины и загрузчики
Настройка установленных плагинов
В файле package.json вот эти строки:
Подключение сторонних библиотек
Не все javascript библиотеки совместимы и могут напрямую использоваться с webpack. Поэтому далее представлены способы подключения сторонних библиотек.
ProvidePlugin для введения неявных глобальных переменных
Для этого встроенный по-умолчанию в webpack плагин ProvidePlugin нужно настроить следующим способом:
Явное указание пути для импорта
Можно импортировать объявления примерно так:
Использование imports-loader для конфигурации this
Устаревшие библиотеки полагаются на this будучи window объектом и это является проблемой, когда библиотека запускается в контексте CommonJS, где this равносильно module.exports.
Использование imports-loader для отключения AMD
Импорт следующим образом поддерживает различные стили модулей, такие как AMD, CommonJS.
Использование script-loader для глобального импорта библиотек
Способ (пример из официальной документации) добавления inline’ом и без добавления в конфиг:
Пример подключения библиотеки WOW.js:
При возникновении ошибки с загруженностью порта рекомендуется закрыть все запущенные процессы для node и перезапустить сборку.
Часть материала взята тут и там, а может еще отсюда.
Основные модули можно найти в официальном репозитории webpack.
Webpack 3
Обновленная версия статьи (под Webpack 3):
Установка webpack 2 как devDependencies:
Узнать ВСЕ версии webpack:
npm view webpack versions
Установить конкретную версию:
Создаем bundle через консоль:
HTML Webpack Plugin
html-webpack-plugin динамически создает html-файл, плюс вставляет в него сгенерированный bundle.js.
Пример использования с кастомизацией шаблона:
Loader
CSS, style, SASS:
css-loader
css-loader включает css-код в выходной bundle.js. То есть без style-loader ничего не произойдет (стили не будут применены): css-loader просто вставит ваш css код в js-файл.
style-loader
sass-loader
Создаем отдельный css-файл (extract-text-webpack-plugin)
Webpack Dev Server
Webpack Dev Server: больше опций
Документация к настройкам Webpack Dev Server: Webpack Dev Server
Кастомизируем Webpack Dev Server в файл webpack.config.js :
Как установить react и babel
Устанавливаем Babel:
Для webpack необходимо настроить соответствующий loader (setup):
Устанавливаем react (Installing React):
Несколько шаблонов в webpack и RimRaf
Для этого в package.json добавим:
Зададим несколько шаблонов:
Но отсюда возникает закономерный вопрос: как указать разные bundle (js) для разных страниц? Если вы хотите несколько выходящих ( output ) bundles, вам потребуется определить несколько entry + не забудьте поменять в otput значение у filename на [name].bundle.js :
Далее, чтобы исключить лишние chunks (‘куски’) js кода, нужно воспользовать опциями excludeChunks (исключаем) или chunks :
Также на stack: создаем конфиг для множества entry points / templates: Webpack конфиг для множества entry points / templates
Как использовать pug (jade) шаблоны в Webpack
Подробнее почитать о pug: pug
Также для 3 Webpack нам потребуется установить HTML Loader
При помощи Hot Module Replacement можно обновлять CSS без перезагрузки страницы.
Настройки приведены здесь: webpack.config.js
Production vs Development Environment
Обратите внимание, что в предыдущем разделе мы отключили ExtractTextPlugin для HMR, но для Production он понадобится. Для этого в package.json добавим для prod NODE_ENV=production :
Как загружать изображения с webpack 2
file-loader
Внутри html, а также css, можно также указать publicPath для картинок.
При этом на выходе мы получим:
image-webpack-loader
Чтобы отптимизировать изображения прежде чем залить их в папку dist опцианально можно использовать image-webpack-loader (напомню, лоадеры работают с конца в массиве).
Bootstrap и webpack 2
Мы будем использовать bootstrap-loader
При установке возникнут предупреждения с целью установить:
Далее вы можете выбрать, какую версию bootstrap вам нужно поставить: installation
Установим, например, 3-й bootstrap:
Подключаем шрифты
Также потребуется подключить loader для шрифтов, которые использует bootstrap: Icon fonts
Добавим папку font для шрифтов:
Подключаем jQuery
Переопределяем переменный bootstrap
ProvidePlugin
Миграция (разница между версиями)
p.s. Изменений между 2-й и 3-й версией совсем немного, так что вы без труда сможете перейти с одной на другую.
Для того чтобы определить, как изменилось поведение того или иного loader/plugin и других частей webpack при переходе с одной версии на другую, можно воспользоваться руководством: migrating
Исходники
Полезные ресурсы
Старая версия статьи: webpack 2
plugins
В то время как loader оперируют с преобразованиями на отдельных файлах, плагины (plugins) оперируют с большими кусками кода.
Например, commons-chunk-plugin другой корневой плагин, который может быть использован, чтобы создать отдельный модуль с общим кодом из нескольких точек входа.
Генерируем страницу из pug-файла при помощи HtmlWebpackPlugin :
loader
Вы можете объединить loader‘s вместе в серию трансформаций.
webpack-dev-server:
Production & Development
Using HTMLWebpackPlugin and Pug
HTMLWebpackPlugin is a simple way to generate the html files for your web app. By default it will create an HTML5 file that includes all your bundled code (script and style tags etc).
Using it can be as simple as the following:
This would generate a generic index.html that includes your javascript bundle.
If you don’t know what Pug is, it’s a whitespace based template engine, implemented in JS for Node.js / Browsers. Pug.js website
Why bother
The default HTML file generated by the plugin is suitable for many projects. If you only need an index.html to deliver your JS then you won’t need to move away from the default / simplest settings.
If you need a more customised HTML file though, you have a couple of options. You can pass an HTML file and the plugin will inject your files, you can use Lodash templates or you can use a templating engine with its corresponding loader. We are going to look at using Pug.
Node modules setup
The minimum setup for this is pretty simple. The modules we need to npm install are:
Project setup
| Source files
File contents
Our files are going to be kept as simple as possible, as the contents are fairly irrelevant to the implementation. Our pug file is going to broken up a bit just as a demonstration. (Using github gist as highlight.js doesn’t currently support pug syntax)
| Pug templates
| CSS
Basic configuration
The basic configuration to start generating your HTML files from pug templates is really simple.
After running webpack we will have an index.html file in our dist/ folder. We can see that our pug content has been used and we can see that our CSS and JS are included and working as the text is red and we get a ‘Success’ alert on load.
Advanced configuration
We can customise our HTML generation further. Currently HTMLWebpackPlugin is automatically injecting our JS and CSS files into our template, but perhaps we want to manually control where in the document these occur.
We can achieve this by setting inject to false.
Manually include CSS and JS
To include our bundles in the correct location in our HTML, we can use pug variables. HTMLWebpackPlugin makes our bundled files available as local variables in our pug template.
If we reload our page after this change, we can see it is back to red text with our exciting ‘Success’ alert.
More control
This means we can have more control over how our bundles are included in the HTML, for instance we can ensure our JS is loaded async or deferred.
Async CSS
We could also load our CSS asynchronously, using this loadCSS function from filament group:
This would be useful in a situation where we are inlining our critical CSS into our HTML and we want to load the rest of the styles after the initial render. You can find out a bit more about critical css and why you may want it in this Google Pagespeed article.
That’s it!
That’s pretty much all there is to generating your HTML from pug templates with the HTMLWebpackPlugin. Other templating engines should behave roughly the same as the behaviour is provided by HTMLWebpackPlugin itself, I can’t confirm this though as I don’t really use other engines.
Как подключить pug к webpack
HTML Webpack Template Pug
This is a Pug template for the webpack plugin html-webpack-plugin. Inspired by another template, html-webpack-template.
In addition to the options that should cover most needs of a single-page app, a custom Pug file can be used to extend the provided layout.pug or to completely rewrite the template while utilizing mixins from mixins.pug.
Loading the template requires that pug-loader and consequently pug be available in node_modules.
Install the template with npm:
or together with peer dependencies:
Required parameters, to be passed to new HtmlWebpackPlugin(options) as properties on options :
Pug-loader should either be set for all *.pug files:
or explicitly together with the template:
An object with one required property tag that will serve as the tag name. All other properties will be set on the injected tag as its attributes. innerHTML property, if set, will be passed as content to non-self-closing tags.
To give an example:
Example of basic usage
An example of webpack configuration utilizing the options above:
An example of webpack configuration with extracting a CSS-only entry chunk:
The layout.pug that is used by default with require(‘html-webpack-template-pug’) amounts to the following:
And can be extended like any other .pug template:
Example of intermediate usage
An example of webpack configuration with a custom template extending the default:
For more flexibility it is possible to directly include mixins.pug and then construct a custom template.
Available mixins are:
inline(filename, tag, searchWithin)
inject(filename, tag, searchWithin)
However, inline and inject mixins allow duplicates.
A custom template can then look like this:
Example of advanced usage
An example of webpack configuration with a custom template including the default mixins:
Webpack 4 и разделение конфигурационного файла на модули
Привет, Хабр! Сегодня я расскажу вам о Webpack 4 с разделением кода на отдельные модули, а также о интересных решениях, которые помогут вам быстрее собрать сборку на webpack 4. В конце, я предоставлю свою базовую сборку на webpack c самыми необходимыми инструментами, которую вы в последствие сможете расширить. Данная сборка вам поможет понять данный материал, а также возможно поможет быстрее написать свою реализацию и быстрее решить возможные проблемы.
Основная идеология данной сборки — это корректное разделения кода внутри конфигурационного файла для удобства использования, чтения и чистоты webpack.config.js. Необходимые модули и плагины для dev и prod версии(а также для разделения функционала в главном файле) будут находиться в отдельной папке webpack и из неё импортироваться для соединения с главным конфигом.
Зачем нужен такой подход?
С постепенным ростом количества модулей, плагинов и т.д, которыми обрастает ваша сборка на вебпаке, конфигурационный файл растёт как на дрожжах. Со временем данный файл становится трудно читаемым, а изменять его под конкретный проект, если какие-то модули в нём не используется становится труднее, а хочется чего-то универсального. Поэтому требуется чёткая организация кода.
Что нам понадобится?
Мы будем использоваться плагин webpack-merge.
Создаём папку webpack и выносим все отдельные модули в отдельные файлы. Например, webpack/pug.js, webpack/scss.js и экспортируем из них эти функции.
Файл webpack.config.js. В данном файле мы их подключаем, и с помощью данного плагина удобно и быстро соединяем.
Теперь если у нас есть новая задача, под которую нужен новый модуль, плагин, лоадер, то мы выносим его в отельный модуль(файл) и помещаем в папку webpack, а затем подключаем его в главный конфигурационный файл, сохраняя конфиг максимально чистым.
Настройки для production и development
Сейчас мы с помощью банального if закончим наше разделение, к которому мы стремились, и настроим наш вебпак под эти два типа разработки, благодаря чему станет окончательно удобно пользоваться данным инструментом, а так же в будущем сможем гибко и просто настраивать его под любой другой проект, или же расширять в текущем. Для экспорта в ноду(для самой работы вебпака) в webpack 4 мы используем следующую конструкцию:
В объект common мы подключаем то, что используется и на проде и в разработке, а в условиях подключаем только те модули, которые необходимы в этих случаях.
Теперь хотелось бы поговорить об основных особенностях webpack 4 относительно webpack 3
В вебпак 3 – это было бы так в plugins:
Соответственно в чанках в HtmlWebpackPlugin подключаем (тут без изменений).
Теперь подход с plugins: [new webpack.optimize.UglifyJsPlugin(<>) ] не работает.
На этом я хотел бы завершить свой рассказ и предоставить свою базовую сборку — ссылка на webpack 4, которая возможно вам поможет в работе и освоение. Спасибо за внимание!