webpack - 如何在不使用 webpack 生成新块的情况下拆分 webpack 条目

Question

我需要使用 webpack 4 执行以下操作：

entry: common.js, one.js, two.js

output: common.bundle.js, one.bundle.js,  two.bundle.js

在哪里：

common.js：包含常用功能

one.js：依赖于 common.js

two.js：依赖 one.js 和 common.js

早些时候我使用了 webpack 3，这是生成此类包的默认行为。现在我使用 webpack 4 我无法让它运行

当我使用默认的 webpack 4 配置运行它时，我得到的是：

common.bundle.js -（好的）

one.bundle.js：包含common.bundle.js的代码（错误，应该只引用common.bundle.js）

two.js：包含 common.bundle.js 和 one.bundle.js 的代码（错误，应该只有 common.bundle.js 和 one.bundle.js 的引用）

Answer 1

如果有人遇到类似情况，我使用以下配置解决了它：

"entry": {
            "main": "main.js"
        },
        "output": {
            "filename": "[name].module.js",
            "path": "./dist"
        },
        "optimization": {                
            "splitChunks": {
                "cacheGroups": {                       
                    "common": {
                        "test": /common/,
                        "name": "common",
                        "chunks": "initial",
                        "enforce": true
                    },
                    "one": {
                        "test": /one/,
                        "name": "one",
                        "chunks": "initial",
                        "enforce": true
                    },
                    "two": {
                        "test": /two/,
                        "name": "two",
                        "chunks": "initial",
                        "enforce": true
                    },                        
                }
            }
        }

最后我有以下输出：

main.module.js,

common.module.js,

one.module.js

二.module.js