Webpack - Как загрузить скрипты не-модуля в глобальную область

поэтому у меня есть несколько файлов поставщиков, которые мне нужно запустить из области окна (это набор функций области окна), плюс у меня есть несколько полифилов, которые я также хотел бы объединить в пакет поставщика.

Поэтому я попробовал что-то вроде этого:

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'js/vendor.min.js',
    minChunks: Infinity,
})

entry: {
    'vendor' : ['./vendor.js', './vendor2.js', './polyfills.js']
}

Теперь, когда я запускаю сборку веб-пакета, он генерирует пакет поставщика, но все это обернуто в оболочку webpackJsonP, поэтому функции недоступны в области окна.

Я также рассмотрел использование чего-то вроде ProvidePlugin, но я не смог заставить это работать вообще, так как у меня нет определенного имени, такого как jQuery, где все сопоставлено.

Это возможно даже в веб-пакете?

Ответ 1

Используйте плагин script-loader:

Если вы хотите, чтобы весь скрипт регистрировался в глобальном пространстве имен, вы должны использовать script-loader. Это не рекомендуется, так как это нарушает смысл модулей ;-) Но если нет другого пути:

npm install --save-dev script-loader

Документы Webpack

Этот загрузчик оценивает код в глобальном контексте, как и вы добавьте код в тег скрипта. В этом режиме каждая нормальная библиотека должно сработать. Требуется, модуль и т.д. не определены.

Примечание. Файл добавляется в строку в виде строки. Не минимизируется по веб-пакету, так что используйте свернутую версию. Также нет инструмента разработки поддержка библиотек, добавленных этим загрузчиком.

Затем в своем файле entry.js вы можете импортировать его inline:

import  "script-loader!./eluminate.js"

или через конфигурацию:

module.exports = {
  module: {
    rules: [
      {
        test: /eluminate\.js$/,
        use: [ 'script-loader' ]
      }
    ]
  }
}

и в вашем entry.js

import './eluminate.js';

Как я уже сказал, он загрязняет глобальное пространство имен: