webpack升級4.0

Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

webpack.optimize.CommonsChunkPlugin 已經被移除，現用 optimization.splitChunks來替代。

1. 將之前的 webpack.optimize.CommonsChunkPlugin 從plugins中去掉。
2. 添加以下代碼：

webpackConfig.optimization =  {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'initial',
          minChunks: 2, maxInitialRequests: 5,
          minSize: 0
        },
        vendor: {
          test: /node_modules/,
          chunks: 'initial',
          name: 'vendor',
          priority: 10,
          enforce: true
        }
      }
    },
    runtimeChunk: true
  }

exports =  webpackConfig

如今官網尚未文檔，大概看下源碼的配置

{
    "description": "Assign modules to a cache group (modules from different cache groups are tried to keep in separate chunks)",
    "type": "object",
    "additionalProperties": {
        "description": "Configuration for a cache group",
        "anyOf": [{
                "enum": [
                    false
                ]
            },
            {
                "instanceof": "Function"
            },
            {
                "type": "string"
            },
            {
                "instanceof": "RegExp"
            },
            {
                "type": "object",
                "additionalProperties": false,
                "properties": {
                    "test": {
                        "description": "Assign modules to a cache group",
                        "oneOf": [{
                                "instanceof": "Function"
                            },
                            {
                                "type": "string"
                            },
                            {
                                "instanceof": "RegExp"
                            }
                        ]
                    },
                    "chunks": {
                        "description": "Select chunks for determining cache group content (defaults to \"initial\", \"initial\" and \"all\" requires adding these chunks to the HTML)",
                        "enum": [
                            "initial",
                            "async",
                            "all"
                        ]
                    },
                    "enforce": {
                        "description": "Ignore minimum size, minimum chunks and maximum requests and always create chunks for this cache group",
                        "type": "boolean"
                    },
                    "priority": {
                        "description": "Priority of this cache group",
                        "type": "number"
                    },
                    "minSize": {
                        "description": "Minimal size for the created chunk",
                        "type": "number",
                        "minimum": 0
                    },
                    "minChunks": {
                        "description": "Minimum number of times a module has to be duplicated until it's considered for splitting",
                        "type": "number",
                        "minimum": 1
                    },
                    "maxAsyncRequests": {
                        "description": "Maximum number of requests which are accepted for on-demand loading",
                        "type": "number",
                        "minimum": 1
                    },
                    "maxInitialRequests": {
                        "description": "Maximum number of initial chunks which are accepted for an entry point",
                        "type": "number",
                        "minimum": 1
                    },
                    "reuseExistingChunk": {
                        "description": "Try to reuse existing chunk (with name) when it has matching modules",
                        "type": "boolean"
                    },
                    "name": {
                        "description": "Give chunks for this cache group a name (chunks with equal name are merged)",
                        "oneOf": [{
                                "type": "boolean"
                            },
                            {
                                "instanceof": "Function"
                            },
                            {
                                "type": "string"
                            }
                        ]
                    },
                    "filename": {
                        "description": "Sets the template for the filename for created chunks (Only works for initial chunks)",
                        "type": "string",
                        "minLength": 1
                    }
                }
            }
        ]
    }
}

this.set("optimization.splitChunks", {});
        this.set("optimization.splitChunks.chunks", "async");
        this.set("optimization.splitChunks.minSize", 30000);
        this.set("optimization.splitChunks.minChunks", 1);
        this.set("optimization.splitChunks.maxAsyncRequests", 5);
        this.set("optimization.splitChunks.maxInitialRequests", 3);
        this.set("optimization.splitChunks.name", true);
        this.set("optimization.splitChunks.cacheGroups", {});
        this.set("optimization.splitChunks.cacheGroups.default", {
            reuseExistingChunk: true,
            minChunks: 2,
            priority: -20
        });
        this.set("optimization.splitChunks.cacheGroups.vendors", {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        });