javascript - what - meet django

¿Cómo puedo crear un paquete de paquete web que importe un módulo de otro paquete de punto de entrada?

Question

Estoy intentando generar un segundo paquete de paquetes web que depende de otro paquete. Cada página necesita el paquete uno, pero solo algunas páginas necesitan el paquete dos.

Por ejemplo, digamos que tengo los siguientes scripts de punto de entrada (estos son ejemplos triviales, simplemente usándolos para transmitir el punto):

bundle-one.js

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

paquete-dos.js

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

Sé que puedo usar CommonsChunkPlugin para generar un archivo commons.js que contiene el cargador de WebPack y jQuery, pero eso requeriría cargar commons.js y bundle-one.js en cada página, incluso cuando no necesito cargar el paquete -two.js.

Básicamente, ¿existe una manera de crear bundle-one.js como el paquete de JavaScript "principal" para todas mis páginas y luego tener la configuración de bundle-two.js para cargar jQuery desde bundle-one.js?

Answer 1

Puede hacer esto de la siguiente manera utilizando el complemento proporcionar:

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

Esto puede ser útil para refactorizar código heredado con muchos archivos diferentes que hacen referencia a $.

Answer 2

Opción 1

Tenga dos configuraciones de Webpack separadas, una para cada paquete. En su primer paquete, exponga jQuery como una variable global cuando lo requiera por primera vez utilizando el expose-loader :

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

Luego, en la configuración del segundo paquete, diga a Webpack que jQuery es "externo" y que no debe incluirse con el resto del código:

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

De esta manera, el primer paquete expone jQuery como una variable global, luego el segundo paquete busca esa variable global en lugar de incluir la fuente.

opcion 2

No estoy seguro de si esto funcionará, pero la documentación de CommonsChunkPlugin dice que puede especificar la opción de configuración de name como un trozo existente. Intenta establecer el nombre en el nombre del fragmento del punto de entrada del paquete1 y, en teoría, jQuery (y otras librerías requeridas en todos los fragmentos) se integrarán en el paquete 1, y no en el paquete 2.