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）< / p>

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

two.module.js

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

1 个答案: