Question

我正在处理一个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可以自动执行此操作。但我不确定为什么坚持要复制这些软件包。我正在使用webpack 3.6.0，BTW。

感谢您的任何建议。

Webpack重复

0 个答案: