2016-01-22 14 views
12

Sto provando a configurare la configurazione di produzione del webpack. Tutto sembra bene. Tuttavia, mi sono reso conto che durante l'utilizzo del plugin chunk commons, copre tutti i file in comune come previsto. Quello che voglio fare è separare i moduli di libreria comuni e i moduli di applicazione comuni. Il mio file di configurazione è:Webpack esclude voci per CommonsChunkPlugin

module.exports = { 
    entry: { 
    lib: ["react", "react-dom"], 
    app: "./ui-v2/app/app.js", 
    app2: "./ui-v2/app/app2.js" 
    }, 
    output: { 
    path: path.join(__dirname, "target/ui/v2"), 
    filename: "/app/[name].[chunkhash].min.js" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: "babel-loader" 
     }, 
     { 
     test: /\.(png|jpg|svg)/, 
     loader: "file-loader?name=img/[name].[hash].[ext]" 
     // loaders: ["url", "image-webpack"] 
     }, 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader", { 
      publicPath: __dirname 
     }) 
     }, 
     { 
     test: /\.(woff|woff2|ttf|eot)$/, 
     loader: "file-loader?name=fonts/[name].[hash].[ext]" 
     } 
    ] 
    }, 
    plugins: [ 
    clean, 
    new webpack.optimize.CommonsChunkPlugin("common", "app/common.[chunkhash].js"), 
    new webpack.ProvidePlugin({ 
     React: "react", 
     ReactDOM: "react-dom", 
     $: "jquery", 
     _: "lodash" 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: false 
     sourceMap: true 
    }, 
    mangle: { 
    except: ["exports", "import", "$", "_", "require", "React", "ReactDOM"] 
    } 
    }), 
    new ExtractTextPlugin("styles/[name].[contenthash].css"), 
    new Manifest() 
    ] 
} 

Fondamentalmente ho 3 moduli nell'app; app.js, app2.js e un componente comune user.js.

Quello che voglio ottenere è raggruppare tutti i file relativi alle librerie come reagire, reagire-dom, lodash, ecc in un pacchetto lib e componenti di applicazioni comuni come user.js in un pacchetto comune. Per fare questo, ho pensato che ci potrebbe essere un'opzione per escludere i file che non voglio che vadano nel file "comune". Se utilizzo questo output, qual è il punto per i file di cache a lungo termine per i pacchetti di librerie perché ogni volta che ottengo un componente comune nel mio progetto, entreranno nel pacchetto comune e l'hash del contenuto sarà diverso, ma nulla cambia in questa libreria file come reagire, jquery, lodash, ecc

ad ogni modo, quello che ho alla fine del processo di generazione è ancora tutto va nel fascio comune e lib non ha nulla e le dimensioni dei file sono:

app.<hash>.min.js -> 3.05KB 
app2.<hash>.min.js -> 3.05KB 
lib.<hash>.min.js -> 165 Bytes (has almost nothing!) 
common.<hash>.js -> 678 KB 

C'è un modo per ottenere ciò che voglio o quale sarebbe l'approccio migliore per una produzione in casi simili? Grazie!

risposta

7

È perché il primo parametro per CommonsChunkPlugin è "comune" dove dovrebbe essere "lib". Il plug-in raccoglie la voce con un nome corrispondente al valore del suo primo parametro.

Un semplice esempio di configurazione scelto dal webpack's wiki -

var webpack = require("webpack"); 

module.exports = { 
    entry: { 
    app: "./app.js", 
    vendor: ["jquery", "underscore", ...], 
    }, 
    output: { 
    filename: "bundle.js" 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js") 
    ] 
}; 

Si noti che la voce "fornitore" è ancora una volta specificato in CommonsChunkPlugin

+0

yepp, è vero, tuttavia, mi aspetto di vedere 4 bundle lì, che sono app.js come codice componente autonomo, app2.js è anche sef contenuto codice componente, lib.js "che ha solo le librerie come" reagisce, lodash ", e la quarta è la" proprietà comune nell'applicazione "che è componente utente creato da me, non una libreria.Come nel titolo della domanda, quello che voglio ottenere è creare due commons, 1st è solo la terza parte, e la seconda è la mia propria sotto-biblioteche e non voglio librerie e componenti di app comuni nella stessa fascio. Grazie per la risposta, ma ne sono a conoscenza – erdysson

+0

Quindi quello che vuoi è questo -> app.js, app2.js, coomon.js e lib.js. E in comune, js, vuoi inserire tutto il tuo codice che è comune tra le app e le app2? Per favore conferma – hazardous

+0

sì, sei corretto – erdysson

7

Si dovrebbe verificare DLL Plugin di Webpack.

https://github.com/webpack/webpack/blob/cb3d8e2097503c7245c5dda5b7a6e9d63421a72b/examples/dll/README.md

Con questo plugin è impacchettare comuni dipendenze 3a parte del fornitore, come reagire e amici in una DLL, che è essenzialmente solo un JSON manifesto che va di pari passo con il vostro richiede avvolto in un contesto webpack nella cache su disco .

Nel codice del progetto, si avranno i componenti condivisi che dipendono da React e dagli amici e si otterrebbe il codice dell'applicazione che dipende dai componenti condivisi, nonché dalla reazione e dagli amici.

Il vostro progetto potrebbe incorporare il plugin DLL di riferimento come potete vedere qui:

https://github.com/webpack/webpack/blob/cb3d8e2097503c7245c5dda5b7a6e9d63421a72b/examples/dll-user/README.md

questo sarà fare in modo che i componenti condivisi e codice dell'applicazione tirare reagire e altri moduli 3a parte dalla stessa Bundle DLL. Ciò può aiutare a migliorare i tempi di costruzione e le prestazioni del server di sviluppo e il ricaricamento dei moduli caldi.

+0

Ottimo suggerimento! DLLPlugin mi ha salvato così tanto tempo ... Vorrei che fosse più documentato e più raccomandato. Ci devono essere così tanti utenti del webpack con complementi incrementali> 2s che non capiscono che c'è un modo migliore ... – vaughan

+0

La DLL funziona bene - e ha il nostro tempo di ricompilazione di 10+ secondi fino a circa 2-3. Combina con HappyPack e le build saranno incredibilmente veloci. – cnp

Problemi correlati