share_this_document plugin page htmlwebpackplugin doc_page cannot body app javascript require commonjs webpack

javascript - plugin - webpack html css



Webpack y bibliotecas externas (1)

Estoy probando el paquete web ( http://webpack.github.io/ ) y se ve muy bien, sin embargo estoy algo atrapado aquí.

Digamos que estoy usando un CDN para una biblioteca, f.ex jQuery. Luego, en mi código, quiero que el require(''jquery'') apunte automáticamente a la instancia de jquery global, en lugar de tratar de incluirlo desde mis módulos.

Intenté usar complementos como IgnorePlugin :

new webpack.IgnorePlugin(new RegExp("^(jquery|react)$"))

Esto funciona para ignorar la biblioteca, pero todavía dice que el módulo requerido "falta" cuando ejecuto el webpacker.

De alguna manera tengo que decirle a webpack que jquery debe ser recogido del contexto global en su lugar. Parece un caso de uso común, así que estoy un poco sorprendido de que los documentos no se dirijan específicamente a esto.


De acuerdo con la documentación de Webpack , puede usar la propiedad externals en el objeto de configuración "para especificar dependencias para su biblioteca que no son resueltas por el paquete web, pero se convierten en dependencias del resultado. Esto significa que se importan desde el entorno mientras el tiempo de ejecución [sic] "

El ejemplo en esa página lo ilustra muy bien, usando jQuery. En pocas palabras, puede requerir jQuery en el estilo CommonJS normal:

var jQuery = require(''jquery'');

Luego, en su objeto de configuración, use la propiedad externals para asignar el módulo jQuery a la variable jQuery global:

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

El módulo resultante creado por Webpack simplemente exportará la variable global existente (aquí voy a dejar un montón de cosas para abreviar):

{ 1: function(...) { module.exports = jQuery; } }

Probé esto, y funciona tal como se describe.