javascript - page - ¿Cómo agrupar scripts de proveedores por separado y requerirlos según sea necesario con Webpack?

webpack doc_page src app page body body share_this_document

Question

Estoy tratando de hacer algo que creo que debería ser posible, pero realmente no puedo entender cómo hacerlo solo desde la documentación del paquete web.

Estoy escribiendo una biblioteca de JavaScript con varios módulos que pueden o no depender el uno del otro. Además de eso, jQuery es utilizado por todos los módulos y algunos de ellos pueden necesitar complementos de jQuery. Esta biblioteca se utilizará en varios sitios web diferentes que pueden requerir algunos o todos los módulos.

Definir las dependencias entre mis módulos fue muy fácil, pero definir sus dependencias de terceros parece ser más difícil de lo que esperaba.

Lo que me gustaría lograr : para cada aplicación quiero tener dos paquetes de archivos, uno con las dependencias de terceros necesarias y otro con los módulos necesarios de mi biblioteca.

Ejemplo : imaginemos que mi biblioteca tiene los siguientes módulos:

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

Y tengo una aplicación (verla como un archivo de entrada único) que requiere los módulos a, byc. Webpack para este caso debería generar los siguientes archivos:

• paquete de proveedores : con jquery, jquery.plugin1 y jquery.ui;
• paquete de sitio web : con los módulos a, byc;

Al final, preferiría tener jQuery como global, por lo que no necesito solicitarlo en cada archivo (podría requerirlo solo en el archivo principal, por ejemplo). Y los complementos jQuery simplemente extenderían $ global en caso de que sean necesarios (no es un problema si están disponibles para otros módulos que no los necesitan).

Suponiendo que esto sea posible, ¿cuál sería un ejemplo de un archivo de configuración de paquete web para este caso? Probé varias combinaciones de cargadores, externos y complementos en mi archivo de configuración, pero realmente no entiendo qué están haciendo y cuáles debo usar. ¡Gracias!

Answer 1

En caso de que esté interesado en agrupar automáticamente sus scripts por separado de los proveedores:

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

Puede leer más sobre esta característica en la documentación oficial .

Answer 2

No estoy seguro si entiendo completamente tu problema, pero como tuve un problema similar recientemente, intentaré ayudarte.

Paquete de proveedores.

Deberías usar CommonsChunkPlugin para eso. en la configuración, especifique el nombre del fragmento (por ejemplo, vendor ) y el nombre del archivo que se generará ( vendor.js ).

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

Ahora es una parte importante, ahora debe especificar qué significa la biblioteca del vendor y lo hace en una sección de entrada. Un elemento más a la lista de entrada con el mismo nombre que el nombre del fragmento recientemente declarado (es decir, ''proveedor'' en este caso). El valor de esa entrada debe ser la lista de todos los módulos que desea mover al paquete de vendor . en su caso debería verse algo así como:

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

JQuery como global

Tuve el mismo problema y lo resolvió con ProvidePlugin . aquí no está definiendo un objeto global sino un tipo de atajos a los módulos. es decir, puedes configurarlo así:

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

Y ahora puede usar $ en cualquier parte de su código: webpack lo convertirá automáticamente a

require(''jquery'')

Espero que haya ayudado. También puede ver mi archivo de configuración de paquete web que está here

Me encanta el paquete web, pero estoy de acuerdo en que la documentación no es la mejor del mundo ... pero bueno, la gente decía lo mismo sobre la documentación angular al principio :)

Editar:

Para tener fragmentos de proveedores específicos de puntos de entrada, solo use CommonsChunkPlugins varias veces:

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

y luego declarar diferentes bibliotecas externas para diferentes archivos:

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

Si algunas bibliotecas se superponen (y para la mayoría de ellas) entre puntos de entrada, puede extraerlas a un archivo común usando el mismo complemento solo con una configuración diferente. Ver this ejemplo.

Answer 3

Tampoco estoy seguro si entiendo completamente su caso, pero aquí hay un fragmento de configuración para crear fragmentos de proveedores separados para cada uno de sus paquetes:

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

Y enlace a los documentos de CommonsChunkPlugin : http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin

Answer 4

en mi archivo webpack.config.js (Versión 1,2,3), tengo

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

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

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

en mi matriz de complementos

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

Ahora tengo un archivo que solo agrega bibliotecas de terceros a un archivo según sea necesario.

Si desea obtener más granular donde separa sus proveedores y archivos de punto 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);
    }
  })
]

Tenga en cuenta que el orden de los complementos es muy importante.

Además, esto va a cambiar en la versión 4. Cuando es oficial, actualizo esta respuesta.

Actualización: cambio de búsqueda indexOf para usuarios de Windows