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

Question

[Сергей Соколов]

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

Как сконфигурить 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

Answer 1

[Сергей Соколов]

Решение: нужен специальный loader: script-loader

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

Использовать:
import exec from 'script-loader!./script.js';

Answer 2

[0xD34F]

Всё так же, как и с остальными файлами - то, что код "не-модульный", не значит, что нельзя выполнять импорт. Просто пишите что-то вроде:

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));

Так они все окажутся в общем бандле.

Comments

[Сергей Соколов]

Спасибо! Совершенно упустил такой import for its side effects only.

[Сергей Соколов]

Не совсем получается: импортируемые так скрипты не появляются в глобальном window, хотя становятся доступны в контексте модулей, где их импортировали.

0xD34F как бы дать этим скриптам именно в глобальный объект добавиться как при обычном <script src="..."></script> ?