¿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 $.

  • Webpack no genera un file de package en npm run
  • Pasar o usar la variable process.env del nodo a reactjs
  • ¿Cómo hacer que el server de Webpack Dev muestre imágenes almacenadas localmente?
  • ¿Debería tener el package web `webpack: //` urls en las comstackciones de producción con sitemaps?
  • ¿Cómo puedo get un package web para encontrar modules angulares?
  • Error de Reacción 0.14.2 - La súper expresión debe ser nula o una function
  • Configure el package web para que se ejecute localmente en un dominio personalizado a través de HTTPS
  • Paquete web Excluir un archivo especĂ­fico
  • Webpack no puede build ES6 en packages externos
  • Webpack web-workers loader no funciona
  • ¿Usar React Router y Webpack 2 cómo exigir bibliotecas externas solo en ciertas routes?
  • Obtener Webpack para no agrupar files
  • ¿Cómo hago para que Webpack salga con un error cuando jshint emite advertencias?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.