Я пытаюсь перейти от Gulp
к Webpack
. У Gulp
меня есть задача, которая копирует все файлы и папки из / static / folder в / build / folder. Как сделать то же самое с Webpack
? Нужен ли мне какой-нибудь плагин?
javascript
webpack
Виталий Корсаков
источник
источник
Ответы:
Вам не нужно копировать вещи, веб-пакет работает иначе, чем gulp. Webpack - это пакет модулей, и все, на что вы ссылаетесь в своих файлах, будет включено. Вам просто нужно указать загрузчик для этого.
Так что если вы напишите:
Сначала Webpack попытается проанализировать указанный файл как JavaScript (потому что это по умолчанию). Конечно, это не удастся. Вот почему вам нужно указать загрузчик для этого типа файла. Файл - или URL-загрузчик , например , принимать ссылочный файл, поместите его в папку вывода WebPack (который должен быть
build
в вашем случае) и возвращает хэш URL для этого файла.Обычно загрузчики применяются через конфигурацию webpack:
Конечно, вам нужно сначала установить загрузчик файлов, чтобы это работало.
источник
Требование ресурсов с помощью модуля загрузчика файлов - это способ использования веб-пакета ( источник ). Однако, если вам нужна большая гибкость или более чистый интерфейс, вы также можете копировать статические файлы напрямую, используя my
copy-webpack-plugin
( npm , Github ). Для вашегоstatic
кbuild
примеру:источник
Если вы хотите скопировать ваши статические файлы, вы можете использовать загрузчик файлов следующим образом:
для HTML-файлов:
в webpack.config.js:
в вашем файле js:
./static/ относительно того, где находится ваш файл js.
Вы можете сделать то же самое с изображениями или чем-то еще. Контекст является мощным методом для изучения!
источник
index.html
папку в подкаталог, который она создает, называется_
(подчеркивание), что происходит?main.js
импортирует все вstatic
папке:require.context("./static/", true, /^.*/);
Одно преимущество, которое приносит вышеупомянутый copy-webpack-plugin , которое не было объяснено ранее, состоит в том, что все другие методы, упомянутые здесь, все еще объединяют ресурсы в ваши файлы комплекта (и требуют, чтобы вы «требовали» или «импортировали» их где-то). Если я просто хочу переместить некоторые изображения или некоторые шаблоны, я не хочу загромождать свой файл комплекта javascript бесполезными ссылками на них, я просто хочу, чтобы файлы выводились в нужном месте. Я не нашел другого способа сделать это в веб-пакете. По общему признанию это не то, для чего первоначально был разработан веб-пакет, но это определенно текущий случай использования. (@BreakDS Я надеюсь, что это отвечает на ваш вопрос - это только выгода, если вы этого хотите)
источник
Выше предложения хороши. Но чтобы попытаться ответить на ваш вопрос напрямую, я бы предложил использовать
cpy-cli
сценарий, определенный в вашемpackage.json
.Этот пример ожидает
node
где-то на вашем пути. Установитьcpy-cli
как зависимость для разработки:npm install --save-dev cpy-cli
Затем создайте пару файлов nodejs. Один, чтобы сделать копию, а другой, чтобы отобразить галочку и сообщение.
copy.js
checkmark.js
Добавьте скрипт в
package.json
. Предполагая, что скрипты находятся в<project-root>/scripts/
Чтобы запустить скрипт:
npm run copy
источник
Скорее всего, вы должны использовать CopyWebpackPlugin, который был упомянут в ответе kevlened. В качестве альтернативы для некоторых файлов, таких как .html или .json, вы также можете использовать raw-loader или json-loader. Установите его через,
npm install -D raw-loader
а затем вам нужно только добавить еще один загрузчик в нашwebpack.config.js
файл.Подобно:
Примечание. Перезапустите webpack-dev-server, чтобы изменения в конфигурации вступили в силу.
И теперь вы можете запрашивать html-файлы, используя относительные пути, это значительно упрощает перемещение папок.
источник
Способ загрузки статического
images
иfonts
:Не забудьте установить,
file-loader
чтобы это работало.источник
logo.png
и не нужно создавать тупое и, мы надеемся, уникальное имя файла, чтобы избежать глобальной коллизии. По той же причине мы используем модули CSS .[path][name].[ext]
и была предусмотренаВы можете написать bash в вашем package.json:
источник
"build": "webpack && xcopy images dist\\images\\ /S /Y && xcopy css dist\\css\\ /S /Y"
Я тоже застрял здесь. copy-webpack-plugin работал для меня.
Однако в моем случае «copy-webpack-plugin» не был необходим (я узнал позже).
webpack игнорирует
пример корневых путей
Следовательно, чтобы сделать это без использования 'copy-webpack-plugin', используйте '~' в путях
«~» указывает веб-пакету рассматривать «изображения» как модуль
примечание: вам может понадобиться добавить родительский каталог к каталогу изображений в
Посетите https://vuejs-templates.github.io/webpack/static.html.
источник
Файл конфигурации веб-пакета (в веб-пакете 2) позволяет экспортировать цепочку обещаний, если последний шаг возвращает объект конфигурации веб-пакета. Смотрите документацию по конфигурации обещаний . Оттуда:
Вы можете создать простую функцию рекурсивного копирования, которая копирует ваш файл, и только после этого запускает веб-пакет. Например:
источник
скажем, все ваши статические ресурсы находятся в папке «static» на корневом уровне, и вы хотите скопировать их в папку сборки, сохраняя структуру подпапки, а затем в ваш файл ввода) просто поместите
источник