webpack里的optimization.splitChunks使用问题

最近在学习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或其他值都试过了,结果都是一样)

阅读 4.8k
评论
    2 个回答
    • 3.9k

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

    欢迎来原博客提问(回答会详细点),原博客教程更新更快。

    原文地址
    更多教程地址

      相似问题
      推荐文章