鍍金池/ 問答/數(shù)據(jù)庫(kù)  網(wǎng)絡(luò)安全  HTML/ webpack里的optimization.splitChunks使用問題

webpack里的optimization.splitChunks使用問題

最近在學(xué)習(xí)webpack4,對(duì)于新加的optimization不甚了解,按照網(wǎng)上學(xué)習(xí)的寫了個(gè)demo,卻沒有預(yù)想中的結(jié)果,求大神幫忙看下,問題出在什么地方

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 
                }
            }
        }
    }
};

預(yù)想中的結(jié)果應(yīng)該是生成一個(gè)commons.chunk.js,包含重復(fù)引入的自定義模塊,一個(gè)vendor.chunk.js包含node_modules的模塊,也就是lodash模塊,可實(shí)際生成的確是:
圖片描述
我哪里配置錯(cuò)了,還是理解錯(cuò)了?(minChunks設(shè)為1或者2,chunks設(shè)為all或其他值都試過了,結(jié)果都是一樣)

回答
編輯回答
呆萌傻

原作者來(lái)答:
optimization.splitChunks.cacheGroups.common 配置項(xiàng)中,是 minSize 設(shè)置為 1。沒有minChunks屬性。

歡迎來(lái)原博客提問(回答會(huì)詳細(xì)點(diǎn)),原博客教程更新更快。

原文地址
更多教程地址

2017年8月29日 12:08