Как отдельно связать вендорные скрипты и требовать их по мере необходимости с Webpack?

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

Я пишу библиотеку JavaScript с несколькими модулями, которые могут зависеть или не зависеть друг от друга. Кроме того, jQuery используется всеми модулями, и некоторые из них могут нуждаться в плагинах jQuery. Затем эта библиотека будет использоваться на нескольких разных веб-сайтах, для которых могут потребоваться некоторые или все модули.

Определить зависимости между моими модулями было очень просто, но определить их сторонние зависимости оказалось сложнее, чем я ожидал.

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

Пример : давайте представим, что моя библиотека имеет следующие модули:

• a (требуется: jquery, jquery.plugin1)
• б (требуется: JQuery, а)
• c (требуется: jquery, jquery.ui, a, b)
• d (требуется: jquery, jquery.plugin2, a)

И у меня есть приложение (рассматривается как уникальный входной файл), для которого требуются модули a, b и c. Webpack для этого случая должен сгенерировать следующие файлы:

• комплект поставщиков : с jquery, jquery.plugin1 и jquery.ui;
• комплектация сайта : с модулями a, b и c;

В конце концов, я бы предпочел использовать jQuery в качестве глобального, поэтому мне не нужно требовать его для каждого отдельного файла (например, я могу требовать его только для основного файла). А плагины jQuery просто расширили бы $ global в случае необходимости (это не проблема, если они доступны для других модулей, которым они не нужны).

Предполагая, что это возможно, что будет примером файла конфигурации веб-пакета для этого случая? Я попробовал несколько комбинаций загрузчиков, внешних модулей и плагинов в моем файле конфигурации, но я не совсем понимаю, что они делают и какие мне следует использовать. Спасибо!

в моем файле webpack.config.js (версия 1,2,3), у меня есть

function isExternal(module) {
  var context = module.context;

  if (typeof context !== 'string') {
    return false;
  }

  return context.indexOf('node_modules') !== -1;
}

в моем массиве плагинов

plugins: [
  new CommonsChunkPlugin({
    name: 'vendors',
    minChunks: function(module) {
      return isExternal(module);
    }
  }),
  // Other plugins
]

Теперь у меня есть файл, который только добавляет сторонние библиотеки в один файл по мере необходимости.

Если вы хотите получить более детальную информацию о том, где вы разделяете своих поставщиков и файлы точек входа:

plugins: [
  new CommonsChunkPlugin({
    name: 'common',
    minChunks: function(module, count) {
      return !isExternal(module) && count >= 2; // adjustable
    }
  }),
  new CommonsChunkPlugin({
    name: 'vendors',
    chunks: ['common'],
    // or if you have an key value object for your entries
    // chunks: Object.keys(entry).concat('common')
    minChunks: function(module) {
      return isExternal(module);
    }
  })
]

Обратите внимание, что порядок плагинов имеет большое значение.

Кроме того, это изменится в версии 4. Когда это будет официально, я обновлю этот ответ.

Обновление: изменение индекса поиска для пользователей Windows

Я не уверен, полностью ли я понимаю вашу проблему, но, поскольку у меня недавно была похожая проблема, я постараюсь помочь вам.

Поставщик комплектации.

Вы должны использовать CommonsChunkPlugin для этого. в конфигурации вы указываете имя чанка (например vendor) и имя файла, который будет сгенерирован ( vendor.js).

new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),

Теперь важная часть, теперь вы должны указать, что означает vendorбиблиотека, и вы делаете это в разделе ввода. Еще один элемент в списке записей с тем же именем, что и имя только что объявленного чанка (в данном случае «vendor»). Значением этой записи должен быть список всех модулей, которые вы хотите переместить в vendorпакет. в вашем случае это должно выглядеть примерно так:

entry: {
    app: 'entry.js',
    vendor: ['jquery', 'jquery.plugin1']
}

JQuery как глобальный

Была такая же проблема и решена с помощью ProvidePlugin . здесь вы определяете не глобальный объект, а какие-то помехи для модулей. то есть вы можете настроить его так:

new webpack.ProvidePlugin({
    $: "jquery"
})

И теперь вы можете просто использовать в $любом месте вашего кода - веб-пакет автоматически преобразует это в

require('jquery')

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

Я люблю webpack, но я согласен, что документация не самая лучшая в мире ... но эй .. люди говорили то же самое об Angular документации в начале :)

Редактировать:

Чтобы иметь чанки вендоров для конкретной точки входа, просто используйте CommonsChunkPlugins несколько раз:

new webpack.optimize.CommonsChunkPlugin("vendor-page1", "vendor-page1.js", Infinity),
new webpack.optimize.CommonsChunkPlugin("vendor-page2", "vendor-page2.js", Infinity),

а затем объявите разные внешние библиотеки для разных файлов:

entry: {
    page1: ['entry.js'],
    page2: ['entry2.js'],
    "vendor-page1": [
        'lodash'
    ],
    "vendor-page2": [
        'jquery'
    ]
},

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

Если вы заинтересованы в автоматическом объединении ваших скриптов отдельно от вендоров:

var webpack = require('webpack'),
    pkg     = require('./package.json'),  //loads npm config file
    html    = require('html-webpack-plugin');

module.exports = {
  context : __dirname + '/app',
  entry   : {
    app     : __dirname + '/app/index.js',
    vendor  : Object.keys(pkg.dependencies) //get npm vendors deps from config
  },
  output  : {
    path      : __dirname + '/dist',
    filename  : 'app.min-[hash:6].js'
  },
  plugins: [
    //Finally add this line to bundle the vendor code separately
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min-[hash:6].js'),
    new html({template : __dirname + '/app/index.html'})
  ]
};

Вы можете прочитать больше об этой функции в официальной документации .

Также не уверен, что я полностью понимаю ваш случай, но вот фрагмент конфигурации для создания отдельных блоков поставщиков для каждого из ваших пакетов:

entry: {
  bundle1: './build/bundles/bundle1.js',
  bundle2: './build/bundles/bundle2.js',
  'vendor-bundle1': [
    'react',
    'react-router'
  ],
  'vendor-bundle2': [
    'react',
    'react-router',
    'flummox',
    'immutable'
  ]
},

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle1',
    chunks: ['bundle1'],
    filename: 'vendor-bundle1.js',
    minChunks: Infinity
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle2',
    chunks: ['bundle2'],
    filename: 'vendor-bundle2-whatever.js',
    minChunks: Infinity
  }),
]

И ссылка на CommonsChunkPluginдокументы: http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin