Як поєднати окремі сценарії постачальників і вимагати їх за потреби за допомогою Webpack?

Я намагаюся зробити щось, що, на мою думку, повинно бути можливим, але я справді не можу зрозуміти, як це зробити лише з документації на веб-пакет.

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

Визначити залежності між моїми модулями було дуже просто, але визначити їх сторонні залежності, здається, складніше, ніж я очікував.

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

Приклад : Давайте уявимо, що моя бібліотека має такі модулі:

• a (потрібно: jquery, jquery.plugin1)
• b (вимагає: jquery, a)
• c (вимагає: jquery, jquery.ui, a, b)
• d (потрібно: jquery, jquery.plugin2, a)

І у мене є додаток (бачити його як унікальний файл вступу), який вимагає модулів a, b і c. Вебпакет для цього випадку повинен генерувати такі файли:

• комплект постачальників : з 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комплект. у вашому випадку це має виглядати приблизно так:

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

JQuery як глобальний

Була така ж проблема і вирішено її за допомогою ProvidePlugin . тут ви визначаєте не глобальний об’єкт, а вид виправдання модулів. тобто ви можете налаштувати його так:

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

А тепер ви можете просто використовувати $будь-де в своєму коді - webpack автоматично перетворить це в

require('jquery')

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

Я люблю веб-пакет, але я згоден, що документація не найприємніша у світі ... але ей .. люди говорили те саме про кутову документацію на початку :)

Редагувати:

Щоб мати певні групи постачальників, просто використовуйте 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