12 |
13 | bitrix-webpack — одной командой разворачивает и настраивает сборщик проектов Webpack4 с установкой следующих CSS- и JS- фреймворков:
14 |
15 | - Webpack 4
16 | - js-фреймворк Vue 2 с примером
17 | - css-фреймворк Uikit 3
18 | - включить поддержку SASS
19 | - разделение css и js на вендорные и кастомные стили и скрипты
20 | - автоматически добавляются сниппеты, подключающие собранные webpack'ом файлы в `footer.php` и в `header.php` во все шаблоны, расположенные в `/bitrix/templates` и `/local/templates`.
21 |
22 | После установки Webpack будет настроен на транспиляцию в ES5, объединение и минификацию вендорных и кастомных для проекта js-скриптов. Объединение, минификацию и расстановку префиксов для css-стилей. Для обхода агрессивного браузерного кеширования к созданным webpack'ом файлам добавляется хэш в название.
23 |
24 | В итоге получится:
25 |
26 | ```html
27 |
28 |
29 |
30 | ```
31 |
32 | ```html
33 |
34 |
35 |
36 | ```
37 |
38 |
Установка
39 |
40 | 1. Перейдите в консоли в самую верхнюю директорию проекта.
41 | 2. **Важно.** Убедитесь, что нет файла `package.json`, так как скрипт его не перезаписывает, а только создает.
42 | 3. Установить
43 |
44 | ```bash
45 | $ npm install -g bitrix-webpack
46 | ```
47 |
48 | Запустить с установкой всех зависимостей
49 | ```bash
50 | $ bitrix-webpack --install
51 | ```
52 |
53 | Запустить без установки всех зависимостей.
54 | ```bash
55 | $ bitrix-webpack
56 | ```
57 |
58 | Появится меню, где можно будет выбрать устанавливать поддержку SASS или нет:
59 |
60 | 
61 |
62 |
63 | В случае без запуска флага `--install` можно до установки зависимостей отредактировать `package.json`, удалить ненужные зависимости, добавить свои, и только потом установить зависимости:
64 |
65 | ```bash
66 | $ npm i
67 | ```
68 |
69 | Если для каких-то шаблонов не нужно подключать стили и скрипты (например, для лендингов), генерируемые для основного сайта, то нужно будет зайти и удалить из этих шаблонов сниппеты, автоматически добавленными перед закрывающимися тегами `` и `
`.
70 |
71 |
Конфигурация
72 |
73 | В структуру битрикс-проекта будут добавлены следующие директории и файлы:
74 |
75 | ```
76 | /build/
77 | config.base.js
78 | config.development.js
79 | config.production.js
80 | getWebpackAssets.php
81 | /custom/
82 | /css/
83 | example.css
84 | /img/
85 | webpack.png
86 | /js/
87 | hello_webpack.js
88 | /vue/
89 | /assets/
90 | logo.png
91 | /components/
92 | Hello.vue
93 | Example.vue
94 | main.js
95 | /src/
96 | webpack_custom.js
97 | webpack_vendor.js
98 | .babelrc
99 | .browserlistrc
100 | package.json
101 |
102 | ```
103 |
104 | Где в `/build` содержатся настройки Webpack.
105 |
106 | В `/custom` содержатся кастомные стили и скрипты проекта. Есть пример с Vue.
107 |
108 | В `/src` импортируются js и css, которые забирать Webpack. В файле `/src/webpack_vendor.js` импортируйте js- и css- библиотеки, фреймворки, т.е. которые редко меняются:
109 |
110 | ```js
111 | // vendor styles
112 | import '../node_modules/uikit/dist/css/uikit.css'
113 |
114 | // vendor js
115 | // set uikit in global variable
116 | import UIkit from 'uikit'
117 | window.UIkit = UIkit;
118 | ```
119 |
120 | В файл `/src/webpack_custom.js` импортируйте специфические для проекта стили и скрипты.
121 |
122 | Такое разделение на вендорные и кастомные файлы позволяет лишний раз не пересобирать Webpack'у редко изменяющиеся вендорные зависимости.
123 |
124 | ```js
125 | // styles
126 | import '../custom/css/example.css';
127 |
128 | // js
129 | import '../custom/js/hello_webpack';
130 |
131 | // vue
132 | import '../custom/vue/main';
133 | ```
134 |
135 | Посмотрите и исправьте если нужно файл `.browserlistrc`, чтобы добавить или убрать поддержку браузеров. По умолчанию включена поддержка браузеров, начиная с IE11.
136 |
137 |