Как webpack'ом минифицировать не-модульный JS?

На странице загружались скрипты сторонних сервисов. Часть их режется адблокерами, хотя к рекламе не относится, поэтому хочу включить локальную копию тех скриптов в сборку. Скрипты не модульные и определяют глобальные переменные и функции.

Как сконфигурить webpack просто собирать в один и минифицировать несколько JS'ов из определённой папки?

Для примера структура папок:
myproject
|- package.json
|- webpack.config.js
|- /dist
  |- index.html
|- /src
  |- main.js
  |- /local_copies
    |- xd_connection.js
    |- rbadman-html5.min.js
    |- adman_init.js
    |- preroll.js


Скрипты из /local_copies хочется просто склеить и Uglify'цировать в отдельный бандл, или включить в общий.

При этом ни один из файлов не оформлен как модуль. Там просто IIFE типа (function(w){ w.fastXDM = {...}})(window) или напрямую назначение глобального объекта:
if (!window.VK) window.VK = {};
VK._Rpc = null;
VK._v = false;
VK._callbacks = {};
// ...


Менять контент этих скриптов, оборачивать их в модульную обёртку и т.п. не хотелось бы – они будут регулярно обновляться автоматически с CDN тех сервисов. Список создаваемых глобальных переменных точно неизвестен и может меняться.
Подключаемые скрипты
https://vk.com/js/api/xd_connection.js?2
https://ad.mail.ru/static/admanhtml/rbadman-html5.min.js
https://vk.com/js/api/adman_init.js
https://js.appscentrum.com/scr/preroll.js
https://an.yandex.ru/system/context.js
https://mc.yandex.ru/metrika/watch.js
  • Вопрос задан
  • 297 просмотров
Решения вопроса 1
sergiks
@sergiks Автор вопроса, куратор тега JavaScript
♬♬
Решение: нужен специальный loader: script-loader

Установить:
npm install --save-dev script-loader

Использовать:
import exec from 'script-loader!./script.js';
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега JavaScript
Всё так же, как и с остальными файлами - то, что код "не-модульный", не значит, что нельзя выполнять импорт. Просто пишите что-то вроде:

import './local_copies/xd_connection.js';
import './local_copies/rbadman-html5.min.js';
// ну и т.д.

Это так называемый импорт ради побочных эффектов.

Можно сократить, избавившись от необходимости указывать конкретные файлы, используя require.context:

const context = require.context('./local_copies', false, /\.js$/);
context.keys().forEach(key => context(key));

Так они все окажутся в общем бандле.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы