Как я могу создать пакет webpack, который импортирует модуль из другого набора точек входа?

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

Например, скажем, у меня есть следующие сценарии точки входа (это тривиальные примеры, просто используя их для получения точки):

пачка one.js

import $ from 'jquery';
$(document).data('key', 'value');

пачка two.js

import $ from 'jquery';
const value = $(document).data('key');

Я знаю, что я могу использовать CommonsChunkPlugin для создания файла commons.js, содержащего загрузчик WebPack и jQuery, но для этого потребуется загрузка как commons.js, так и bundle-one.js на каждой странице, даже если мне это не нужно для загрузки bundle-two.js.

Итак, в основном: есть ли способ построить bundle-one.js в качестве "основного" пакета JavaScript для всех моих страниц, а затем установить setup.set пакета bundle-two.js для загрузки jQuery из bundle-one.js?

Ответ 1

Вариант 1

У вас есть две отдельные конфигурации Webpack, по одному для каждого пакета. В вашем первом пакете выведите jQuery как глобальную переменную, когда вы сначала требуете ее, используя expose-loader:

loaders: [
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]

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

{
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    }
}

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

Вариант 2

Я не уверен, что это сработает, но CommonsChunkPlugin documentation говорит, что вы можете указать опцию name config как существующий кусок. Вы пытаетесь установить имя для своего имени в точке входа в узел bundle1, и, теоретически, jQuery (и другие библиотеки, необходимые для всех фрагментов) будут встроены в пакет 1, а не связывать 2.

Ответ 2

Вы можете сделать это следующим образом, используя плагин обеспечения -

//webpack.config.js
module.exports = {
  entry: './index.js',
  output: { 
    filename: '[name].js' 
  },
  externals: {
    jquery: 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
    })
  ]
};

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