javascript - the - ¿Extraer fragmentos comunes entre múltiples configuraciones de compiladores en paquetes web?

webpack-- config webpack config js

Question

Estoy probando la opción de varios compiladores en el paquete web y sigo el example en su github. Sin embargo, parece que no entiendo cómo puedo dividir el código común entre las múltiples configuraciones.

Por ejemplo, es posible que tenga las mismas bibliotecas de proveedores utilizadas en los diferentes conjuntos de configuraciones. Me gustaría que estos códigos compartidos se agrupen en un único archivo común.

Intenté lo siguiente, pero terminó creando paquetes individuales de la entrada de vendors para cada configuración de compilación.

var path = require("path");
var webpack = require("webpack");
module.exports = [
    {
        name: "app-mod1",
        entry: {
            vendors: [''jquery'', ''react'', ''react-dom''],
            pageA: [''./mod1/pageA''],
            pageB: [''./mod1/pageB'']
        },
        output: {
            path: path.join(__dirname, "/mod1/js"),
            filename: "[name].bundle.js"
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: [''vendors''],
                minChunks: Infinity
            })
        ]
    },
    {
        name: "app-mod2",
        entry: {
            vendors: [''lodash'', ''react'', ''react-dom''],
            pageA: [''./mod2/pageA''],
            pageB: [''./mod2/pageB'']
        },
        output: {
            path: path.join(__dirname, "/mod2/js"),
            filename: "[name].bundle.js"
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: [''vendors''],
                minChunks: Infinity
            })
        ]
    }
];

Dado que reaccionar, reaccion-dom se comparten entre las 2 compilaciones, mi intención es que se agrupen como un único archivo que se pueda compartir en lugar de crear un mismo paquete para cada compilación.

¿Cómo puedo extraer los fragmentos comunes de varias configuraciones del compilador?

Answer 1

Breve respuesta

No puedes hacer ese trabajo de la manera que quieres.

TL; DR

@Carven, me temo que no puede lograr su objetivo a través de MultiCompiler of Webpack, MultiCompiler no está destinado a hacer ese trabajo, al menos para la función cercana.

Ver el código fuente para iniciar la instancia de MultiCompiler , en realidad inicia instancias de Compiler separado. Estos compiladores no tienen datos compartidos entre.

Vea también la fuente de ejecución de la instancia de MultiCompiler , la instancia de los compiladores también se ejecuta por separado sin compartir datos.

Lo único que comparten estos compiladores es la instancia de Stats que producen y se fusionan en un MultiStats .

Por cierto, no hay ninguna pista en el ejemplo que mencionó que algunos módulos se comparten entre varios compiladores.

Alternativa

Como lo describe @ Tzook-Bar-Noy, IMHO, debe usar las entradas múltiples para lograr el paquete de MPA (aplicación de múltiples páginas).

Otros vale la pena mencionar

Noté que una biblioteca llamada webpack-multi-configurator está usando la función multi-compilador. Pero no creo que comparta partes comunes.

Answer 2

Aprendí sobre esto ahora, y este tema parece bastante difícil de entender en los documentos del paquete web. Logré crear algo que funciona, ya que creó 2 archivos separados y extrajo las dependencias comunes a otro archivo.

Aquí está mi configuración webpack:

{
    entry: {

        pageA: "./first/first",
        pageB: "./second/second"
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: "[name].js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ["vendor", "common"],
        })
    ]
};

La salida de esto será:

./js/
    common.js
    vendor.js
    pageA.js
    pageB.js

Creé un repositorio con el ejemplo en el que trabajé: https://github.com/tzookb/webpack-common-vendor-chunks

cuando abro un nuevo archivo html cargo estos archivos:

 first page:
     common.js
     vendor.js
     pageA.js

 sec page:
     common.js
     vendor.js
     pageB.js

Answer 3

Puede extraer el código compartido en otra compilación y agruparlo con DllBundlesPlugin. luego, consuma este DLL a través de DLLReferencePlugin y agréguelo a su página de forma manual o mediante HTMLWebpackPlugin add-asset-html-webpack-plugin

Bolierplate se puede reducir usando autodll-webpack-Plugin