Como agrupar scripts de fornecedores separadamente e solicitá-los conforme necessário com o Webpack?

Estou tentando fazer algo que acredito ser possível, mas realmente não consigo entender como fazê-lo apenas a partir da documentação do webpack.

Estou escrevendo uma biblioteca JavaScript com vários módulos que podem ou não depender um do outro. Além disso, o jQuery é usado por todos os módulos e alguns deles podem precisar de plugins do jQuery. Essa biblioteca será usada em vários sites diferentes, que podem exigir alguns ou todos os módulos.

Definir as dependências entre meus módulos foi muito fácil, mas definir suas dependências de terceiros parece ser mais difícil do que eu esperava.

O que eu gostaria de alcançar : para cada aplicativo, quero ter dois arquivos de pacote configurável, um com as dependências de terceiros necessárias e outro com os módulos necessários da minha biblioteca.

Exemplo : Vamos imaginar que minha biblioteca tenha os seguintes módulos:

• a (requer: jquery, jquery.plugin1)
• b (requer: jquery, a)
• c (requer: jquery, jquery.ui, a, b)
• d (requer: jquery, jquery.plugin2, a)

E eu tenho um aplicativo (veja como um arquivo de entrada exclusivo) que requer os módulos a, bec. O Webpack para esse caso deve gerar os seguintes arquivos:

• pacote de fornecedores : com jquery, jquery.plugin1 e jquery.ui;
• pacote de sites : com os módulos a, bec;

No final, eu preferiria ter o jQuery como global, para não precisar exigi-lo em todos os arquivos (só poderia ser exigido no arquivo principal, por exemplo). E os plugins jQuery estenderiam apenas $ global caso sejam necessários (não é um problema se estiverem disponíveis para outros módulos que não precisam deles).

Supondo que isso seja possível, qual seria um exemplo de um arquivo de configuração do webpack para este caso? Tentei várias combinações de carregadores, externos e plugins no meu arquivo de configuração, mas realmente não entendo o que eles estão fazendo e quais devo usar. Obrigado!

no meu arquivo webpack.config.js (versão 1,2,3), tenho

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

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

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

na minha matriz de plugins

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

Agora eu tenho um arquivo que adiciona apenas bibliotecas de terceiros a um arquivo, conforme necessário.

Se você deseja obter mais detalhes, separa seus fornecedores e arquivos de ponto de entrada:

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);
    }
  })
]

Observe que a ordem dos plug-ins é muito importante.

Além disso, isso vai mudar na versão 4. Quando isso é oficial, eu atualizo esta resposta.

Atualização: indexOf alteração de pesquisa para usuários do Windows

Não sei se entendi perfeitamente o seu problema, mas como tive um problema semelhante recentemente, tentarei ajudá-lo.

Pacote de fornecedores.

Você deve usar o CommonsChunkPlugin para isso. na configuração, você especifica o nome do pedaço (por exemplo vendor) e o nome do arquivo que será gerado ( vendor.js).

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

Agora parte importante, você precisa especificar o que significa vendorbiblioteca e fazer isso em uma seção de entrada. Mais um item na lista de entradas com o mesmo nome do pedaço recém-declarado (por exemplo, 'fornecedor'). O valor dessa entrada deve ser a lista de todos os módulos que você deseja mover para vendoragrupar. no seu caso, deve ser algo como:

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

JQuery como global

Teve o mesmo problema e resolveu-o com o ProvidePlugin . aqui você não está definindo um objeto global, mas um tipo de shurtcuts para os módulos. ou seja, você pode configurá-lo assim:

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

E agora você pode simplesmente usar $em qualquer lugar do seu código - o webpack o converterá automaticamente em

require('jquery')

Espero que tenha ajudado. você também pode olhar para o meu arquivo de configuração do webpack que está aqui

Eu amo o webpack, mas concordo que a documentação não é a mais legal do mundo ... mas ei ... as pessoas estavam dizendo a mesma coisa sobre a documentação do Angular no início :)

Editar:

Para ter blocos de fornecedores específicos para pontos de entrada, use CommonsChunkPlugins várias vezes:

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

e declare diferentes bibliotecas extenrais para arquivos diferentes:

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

Se algumas bibliotecas estiverem sobrepostas (e para a maioria delas) entre pontos de entrada, você poderá extraí-las para um arquivo comum usando o mesmo plug-in apenas com configurações diferentes. Veja este exemplo.

Caso você esteja interessado em agrupar automaticamente seus scripts separadamente dos de fornecedores:

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'})
  ]
};

Você pode ler mais sobre esse recurso na documentação oficial .

Também não tenho certeza se eu entendo completamente o seu caso, mas aqui está o snippet de configuração para criar blocos de fornecedores separados para cada um de seus pacotes configuráveis:

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
  }),
]

E link para CommonsChunkPlugindocs: http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin