Webpack — чрезвычайно полезный инструмент для создания и минимизации исходных файлов. Мы используем его для наших проектов React, и это отличный инструмент, похожий на Grunt и Gulp. Недавно мне нужно было вывести файлы JavaScript и CSS в отдельные каталоги.
Первая проблема, которую необходимо решить, — это отделение JavaScript от CSS. По умолчанию Webpack объединяет эти два файла в один файл JavaScript. С помощью ExtractTextPlugin вы можете разделить их на две части.
Сначала, конечно, вы указываете вывод:
Затем вы можете использовать ExtractTextPlugin для извлечения CSS в отдельный файл, указав загрузчик и плагин:
Текущий вывод будет заключаться в том, что файлы myproject.css и myproject.js будут выводиться в somedirectory/public. Но что, если вы хотите, чтобы css перейти в другое место, например somedirectory/public/styles? Что ж, ExtractTextPlugin просто помещает созданный им css-файл в то же место, которое вы указали в своем выходном блоке. Поскольку это точка отсчета, вы можете создать новую папку относительно нее. Итак, если вы хотите поместить свой css в вышеупомянутый каталог стилей, вы должны сделать это:
Если вы хотите подняться на уровень выше и не находиться внутри общедоступного (somedirectory/styles), вы можете добиться этого следующим образом:
Просто имейте в виду, что это фактически создаст новый каталог стилей, если он еще не существует. Все, что вам нужно помнить, это то, что вывод извлеченных файлов зависит от пути вывода для JavaScript.
