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!
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
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
sì, sei corretto – erdysson