如何在不使用 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
                    },                        
                }
            }
        }

最后我有以下输出：

ma​​in.module.js，

common.module.js，

one.module.js

两个.module.js