bundle-loader

Загрузчик пакетов для webpack

Установка

npm i bundle-loader --save

Использование

webpack.config.js

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

Модуль запрошен при необходимости.

file.js

import bundle from './file.bundle.js';

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

bundle((file) => {
  // use the file like it was required
  const file = require('./file.js')
});

Это обертывает require('file.js') в require.ensure блок

Можно добавить несколько колбэков. Они будут выполнены в порядке добавления.

bundle(callbackTwo)
bundle(callbackThree)

Если колбэк добавлен после загрузки зависимостей, он будет вызван немедленно.

Параметры

Имя	Тип	По умолчанию	Описание
lazy {Boolean}	{Boolean}	false	Асинхронная загрузка импортированного пакета
name {String}	{String}	[id].[name]	Настройка пользовательского имени для импортированного пакета

lazy

Файл запрашивается при необходимости bundle-loader. Если требуется ленивая загрузка, используйте:

webpack.config.js

{
  loader: 'bundle-loader',
  options: {
    lazy: true
  }
}

import bundle from './file.bundle.js'

bundle((file) => {...})

ℹ️ Модуль не запрашивается до вызова функции загрузки

name

Можно задать имя пакета, используя параметр name опций. См. документацию.

webpack.config.js

{
  loader: 'bundle-loader',
  options: {
    name: '[name]'
  }
}

:warning: пакеты, созданные загрузчиком, будут именоваться согласно правилу output.chunkFilename, которое по умолчанию [id].[name]. Здесь [name] соответствует имени пакета, заданному в параметре name опций.

Примеры

import bundle from './file.bundle.js'

webpack.config.js

module.exports = {
  entry: {
   index: './App.js'
  },
  output: {
    path: path.resolve(__dirname, 'dest'),
    filename: '[name].js',
    // or whatever other format you want
    chunkFilename: '[name].[id].js',
  },
  module: {
    rules: [
      {
        test: /\.bundle\.js$/,
        use: {
          loader: 'bundle-loader',
          options: {
            name: 'my-chunk'
          }
        }
      }
    ]
  }
}

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

Пакеты из bundle-loader, однако, будут загружаться, используя правило chunkFilename , поэтому примерные файлы дадут my-chunk.1.js и file-2.js соответственно.

Можно также использовать chunkFilename для добавления хешей в имя файла, так как добавление [hash] в параметр опций пакета не работает корректно.