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


Ich versuche die Konfiguration der Webpack-Produktion 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 die Bündelung aller Bibliotheksbezogenen Dateien wie react, react-dom, lodash usw. in einem lib-Bundle und allgemeinen Anwendungskomponenten wie user.js in einem gemeinsamen Bundle. 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 diese Ausgabe verwende, was ist der Punkt für das langfristige Caching von Dateien für Bibliotheksbündel, weil, wenn ich eine gemeinsame Komponente in meinem Projekt bekomme, sie in das gemeinsame Bundle gehen und der Inhalt Hash wird anders sein, aber nichts ändert sich in dieser Bibliothek Dateien wie reagieren, jquery, lodash, etc.

Wie auch immer, was ich am Ende des Buildprozesses habe ist, dass alles noch in das Bundle geht und lib nichts hat 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!


12
2018-01-22 07:47


Ursprung


Antworten:


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

Eine einfache Beispielkonfiguration ausgewählt von 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 der Eintrag "vendor" erneut in CommonsChunkPlugin angegeben wird


7
2018-01-22 08:44



Sie sollten das DLL Plugin von Webpack ausprobieren.

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

Mit diesem Plugin bündeln Sie gängige Abhängigkeiten von Drittanbietern wie React und Freunde in einer DLL, die im Wesentlichen nur ein JSON-Manifest ist, das mit Ihren Anforderungen im Webpack-Kontext einhergeht und zwischengespeichert wird.

In Ihrem Projektcode würden Sie Ihre freigegebenen Komponenten haben, die von React und Freunden abhängen, und Sie würden Ihren Anwendungscode haben, der von Ihren gemeinsam genutzten Komponenten sowie von Reagieren und Freunden abhängt.

Ihr Projekt würde das DLL Reference-Plugin enthalten, wie Sie hier sehen können:

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

Dadurch wird sichergestellt, dass Ihre gemeinsam genutzten Komponenten und Ihr Anwendungscode React und andere Module von Drittanbietern aus demselben DLL-Bundle ziehen. Dies kann dazu beitragen, die Build-Zeiten und die Leistung des Dev-Servers und das Neuladen von Hot-Modulen zu verbessern.


7
2018-02-24 07:25