Webpack schließt Einträge für CommonsChunkPlugin aus

Question

Ich versuche, die Webpack-Produktionskonfiguration einzurichten. Alles sieht gut aus. Allerdings habe ich festgestellt, dass bei der Verwendung des Commons Chunk-Plugins alle Dateien wie erwartet gemeinsam behandelt werden. Was ich tun möchte, ist die Trennung von allgemeinen Bibliotheksmodulen und gemeinsamen Anwendungsmodulen. Meine Konfigurationsdatei ist:

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() 
    ] 
} 

Grundsätzlich habe ich 3 Module in der App; app.js, app2.js und eine gemeinsame Komponente user.js.

Was ich erreichen möchte ist, alle Bibliothek bezogenen Dateien wie react, react-dom, lodash, etc. in einem lib-Bundle und gemeinsame Anwendungskomponenten wie user.js in einem gemeinsamen Bundle zu bündeln. Um dies zu tun, dachte ich, es könnte eine Option geben, die Dateien auszuschließen, die nicht in eine "normale" Datei gehen sollen. Wenn ich diesen Ausgang verwenden, was ist der Punkt für die Langzeit Caching-Dateien für die Bibliotheksbündel, weil, wenn ich eine gemeinsame Komponente in meinem Projekt zu bekommen, werden sie in das gemeinsame Bündel gehen und der Inhalt Hash wird anders sein, aber es ändert sich nichts in dieser Bibliothek Dateien wie reagieren, jquery, lodash usw.

wie auch immer, was ich am Ende des Build-Prozess haben, ist alles, was geht noch in die gemeinsame Bündel und lib hat nichts und die Dateigrößen sind:

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 

Gibt es einen Weg, um zu erreichen, was ich will oder was wäre der beste Ansatz für eine Produktion in ähnlichen Fällen? Vielen Dank!

Answer 1

Sein, weil der erste Parameter für CommonsChunkPlugin ist „common“, wo es sollte „lib“ sein. Das Plugin nimmt den Eintrag mit einem Namen auf, der mit dem Wert seines ersten Parameters übereinstimmt.

Ein einfaches Beispiel Config gepflückt aus 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") 
    ] 
}; 

Beachten Sie, dass die "Verkäufer" Eintrag wieder in CommonsChunkPlugin angegeben

Answer 2

Sie sollten Plugin Webpack DLL überprüfen.

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

Mit diesem Plugin bündeln Sie gemeinsam 3rd-Party-Anbieter Abhängigkeiten wie Reagieren und Freunde in einer DLL auf, die im Wesentlichen nur ein JSON-Manifest, das entlang geht, ist mit dem in webpack Kontext und im Cache gespeichert auf Festplatte gewickelt erfordert .

in Ihrem Projekt-Code, würden Sie Ihre gemeinsam genutzten Komponenten haben, die auf Reagieren und Freunden abhängen, und Sie würden Ihren Anwendungscode haben, die als auf Ihrer gemeinsam genutzten Komponenten hängen auch reagieren und Freunde.

Ihr Projekt würde die DLL Referenz-Plugin enthält, wie Sie hier sehen können:

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

Dies wird dafür sorgen, dass Ihre gemeinsam genutzten Komponenten und Anwendungscode Pull Reagieren und andere 3rd-Party-Module aus dem gleichen DLL-Paket Dies kann dazu beitragen, die Build-Zeiten und die Leistung des Dev-Servers und das Neuladen von Hot-Modulen zu verbessern.