Estoy tratando de hacer algo que creo que debería ser posible, pero realmente no puedo entender cómo hacerlo solo con la documentación del paquete web.
Estoy escribiendo una biblioteca de JavaScript con varios módulos que pueden o no depender unos de otros. Además de eso, todos los módulos utilizan jQuery 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 las 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 archivos de paquete, 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:
Y tengo una aplicación (véala como un archivo de entrada único) que requiere los módulos a, b y c. Webpack para este caso debería generar los siguientes archivos:
Al final, preferiría tener jQuery como global para no necesitarlo 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 lo que están haciendo y cuáles debo usar. ¡Gracias!
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 ser más granular al separar sus proveedores y los archivos de puntos 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 sea oficial, actualizo esta respuesta.
Actualización: indexOf cambio de búsqueda para usuarios de Windows
No estoy seguro de entender completamente su problema, pero como recientemente tuve un problema similar, intentaré ayudarlo.
Paquete de proveedores.
Deberías usar CommonsChunkPlugin para eso. en la configuración, especifica el nombre del fragmento (p. ej., vendor ) y el nombre del archivo que se generará ( vendor.js ).
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity), Ahora una parte importante, ahora debe especificar qué significa biblioteca de vendor y hacerlo en una sección de entrada. Un elemento más a la lista de entrada con el mismo nombre que el nombre del fragmento recién 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 tu caso debería verse algo como:
entry: { app: 'entry.js', vendor: ['jquery', 'jquery.plugin1'] }JQuery como global
Tenía el mismo problema y lo resolvió con ProvidePlugin . aquí no está definiendo un objeto global sino una especie de acceso directo a los módulos. es decir, puedes configurarlo así:
new webpack.ProvidePlugin({ $: "jquery" }) Y ahora puede usar $ en cualquier parte de su código: el paquete web lo convertirá automáticamente en
require('jquery')Espero haber ayudado. también puede mirar el archivo de configuración de mi paquete web que está aquí
Me encanta el paquete web, pero estoy de acuerdo en que la documentación no es la mejor del mundo... pero oye... la gente decía lo mismo sobre la documentación de Angular al principio :)
Editar:
Para tener fragmentos de proveedores específicos del punto de entrada, simplemente 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 los puntos de entrada, puede extraerlas a un archivo común usando el mismo complemento solo que con una configuración diferente. Vea este ejemplo.
En caso de que esté interesado en agrupar automáticamente sus scripts por separado de los 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 función en la documentación oficial .