¿Cómo puedo crear un package de webpack que importe un module desde otro package de puntos de input?

Intento generar un segundo package de webpack que dependa de otro package. Cada página necesita package uno, pero solo algunas páginas necesitan package dos.

Por ejemplo, digamos que tengo los siguientes scripts de puntos de input (estos son ejemplos triviales, solo los uso para transmitir el punto):

bundle-one.js

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

bundle-two.js

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

Sé que puedo usar CommonsChunkPlugin para generar un file commons.js que contenga el cargador WebPack y jQuery, pero eso requeriría cargar tanto commons.js como bundle-one.js en cada página, incluso cuando no necesite cargar el package. -two.js.

Entonces, básicamente: ¿hay alguna forma de comstackr bundle-one.js como el package de JavaScript "principal" para todas mis páginas, y luego tener la configuration de bundle-two.js para cargar jQuery de bundle-one.js?

2 Solutions collect form web for “¿Cómo puedo crear un package de webpack que importe un module desde otro package de puntos de input?”

Opción 1

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

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

Luego, en la configuration de su segundo package, informe a Webpack que jQuery es "externo" y no debe includese con el rest del código:

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

De esta forma, el primer package expone jQuery como una variable global, luego el segundo package busca esa variable global en lugar de include el origen.

opcion 2

No estoy seguro de si esto funcionará, pero la documentation de CommonsChunkPlugin dice que puede especificar la opción de configuration de name como un fragment existente. Intenta configurar el nombre en el nombre de fragment de punto de input bundle1 y, en teoría, jQuery (y otras bibliotecas necesarias en todos los fragments) se integrarán en el package 1 y no en el package 2.

Puede hacer esto de la siguiente manera utilizando el complemento de 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 el código henetworkingado con una gran cantidad de files diferentes que hacen reference a $.

  • IntelliJ no puede resolver la ruta alias del package web
  • Cómo determinar la versión del package web instalado
  • Todo mi código se ejecuta dos veces cuando es comstackdo por Webpack
  • La creación de la carpeta web es muy lenta debido a las bibliotecas externas
  • Webpack: Cómo dominar la biblioteca js no npm
  • Excluir elementos externos de Webpack con componentes / fragments de biblioteca
  • ¿Por qué es webpack? No se actualiza cuando se actualizan files específicos
  • Imagen estática src en la plantilla de Vue.js
  • Angular2: importe un file js externo en un componente
  • Excluyendo less carga de packages de webpack
  • Tipo Error - No es un Constructor
  • Cómo excluir el package web de la agrupación de files .spec.js
  • Cree packages SPA individuales con Webpack
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.