webpack里的optimization.splitChunks使用问题

Question

最近在学习webpack4，对于新加的optimization不甚了解，按照网上学习的写了个demo，却没有预想中的结果，求大神帮忙看下，问题出在什么地方

package.json:

{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.15.1",
        "webpack-cli": "^3.1.0"
    },
    "dependencies": {
        "lodash": "^4.17.10"
    }
}

module.js:

export default "module";

subPageA.js:

import "./module.js";
export default "subPageA";

subPageB.js:

import "./module.js";
export default "subPageB";

pageA.js:

import "./subPageA.js";
import "./subPageB.js";

import * as _ from "lodash";
console.log("At page 'A' :", _);

export default "pageA";

pageB.js:

import "./subPageA.js";
import "./subPageB.js";

import * as _ from "lodash";
console.log("At page 'B' :", _);

export default "pageB";

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        pageA: "./src/pageA.js",
        pageB: "./src/pageB.js"
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        chunkFilename: "[name].chunk.js"
    },
    optimization: {
        splitChunks: {
            cacheGroups: { 
                commons: {
                    name: "commons",
                    chunks: "all", 
                    minChunks: 2,
                    priority: 0 
                },
                vendor: { 
                    name: 'vendor',
                    test: /[\\/]node_modules[\\/]/,
                    chunks: 'all', 
                    priority: 10 
                }
            }
        }
    }
};

预想中的结果应该是生成一个commons.chunk.js，包含重复引入的自定义模块，一个vendor.chunk.js包含node_modules的模块，也就是lodash模块，可实际生成的确是：

我哪里配置错了，还是理解错了？(minChunks设为1或者2，chunks设为all或其他值都试过了，结果都是一样)

Answer 1

原作者来答：
optimization.splitChunks.cacheGroups.common 配置项中，是 minSize 设置为 1。没有minChunks属性。

欢迎来原博客提问（回答会详细点），原博客教程更新更快。

原文地址
更多教程地址

Answer 2

心谭的回答是错的

你的两个页面都引入了lodash这个库 这个库在nodemodules里 所以vender和common冲突了
但是你设置的vender的 priority: 10 所以vender优先级高 所以打包后只有vender没有common