2

我正在处理一个webpack配置文件，我觉得我要么缺少一些基本的东西，要么完全误解了我认为的webpack. 我有一个非常基本的webpack.config.js文件，如下所示：

module.exports = {
    "entry": {
        "app": [
            "./bundle.js"
        ]
    },
    "output": {
        "filename": "bundle-[name].bundle.js",
        "path": path.resolve(__dirname, "build"),
    },
}

如果我使用这个文件，我会得到一个 18.8Mb 的包。如果我使用webpack-bundle-analyzer，我会到处看到大量重复。为了让它将所有常见的东西组合到一个单独的附加包中，我尝试使用CommonsChunkPlugin如下：

module.exports = {
    "entry": {
        "app": [
            "./bundle.js"
        ]
    },
    "output": {
        "filename": "bundle-[name].bundle.js",
        "path": path.resolve(__dirname, "build"),
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            minChunks: 2,
        })
    ]
}

这样，包仍然是 18.8Mb，并且生成了一个 5.79kb 的通用包。没运气。然后我尝试明确命名我想放入公共包中的位：

module.exports = {
    "entry": {
        "common": ["react", "react-dom", "mobx", "mobx-react", "three", "three-trackballcontrols"],
        "app": [
            "./bundle.js"
        ]
    },
    "output": {
        "filename": "bundle-[name].bundle.js",
        "path": path.resolve(__dirname, "build"),
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            minChunks: 2,
        })
    ]
}

现在我得到了两个包，一个是 18Mb，另一个是 2.95Mb（总共 20.95Mb）。所以仍然没有朝着正确的方向前进。但是，如果我仔细检查并尝试发现我认为重复最多的模块并为它们定义一个分辨率别名，例如，

module.exports = {
    "entry": {
        "app": [
            "./bundle.js"
        ]
    },
    resolve: {
        alias: {
            "react": path.resolve(__dirname, "node_modules", "react"),
            "react-dom": path.resolve(__dirname, "node_modules", "react-dom"),
            "mobx": path.resolve(__dirname, "node_modules", "mobx"),
            "mobx-react": path.resolve(__dirname, "node_modules", "mobx-react"),
            "rxjs": path.resolve(__dirname, "node_modules", "rxjs"),
            "three": path.resolve(__dirname, "node_modules", "three"),
            ...
        }
    },
    "output": {
        "filename": "bundle-[name].bundle.js",
        "path": path.resolve(__dirname, "build"),
    },
}

现在，我得到了一个只有 6.1Mb 的捆绑包。现在我意识到 6.1Mb 仍然很大（此时我没有运行生产优化webpack），但它是原始包大小的 1/3，所以这是一个巨大的胜利。但令我失望的是，我不得不手动检查并找出重复的模块是什么。我认为整个观点的一部分webpack是它会为我做这件事？

通常，诸如此类的东西react在各种包中被标记为对等依赖项。但我知道至少有一个three被列为依赖项（不是对等依赖项）。这会影响这一切吗？如果是这样，那么问题是对于该特定模块，我不确定将其标记three为对等依赖项是否有意义，因为无法真正预测在应用程序级别将其添加为依赖项是否有意义。

底线是我怀疑我做错了什么。我想解决这个“正确的方法”，以便webpack可以自动执行此操作。但我不确定为什么它坚持复制这些包。我正在使用webpack3.6.0，顺便说一句。

感谢您的任何建议。

4

0 回答 0