Webpack 多条目通用供应商

Webpack Multi Entry Common Vendor

本文关键字：供应商 Webpack      更新时间：2023-09-26

我有一个具有多个入口点的应用程序。但所有入口点都使用相同的第三方库。我想将这些第三方库单独放在一个单独的文件中。当我按照文档中的步骤操作时，它将我的应用程序代码也移动到第三个供应商块文件中。

entry: {
    index: __dirname + "/entry1.js",
    app: __dirname + "/entry2.js",
    vendor: ["axios", "react-router", "react", "react-dom"]
},
output: {
    path: __dirname + "/build",
    filename: "[name]-[hash].js"
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin("vendor", "[name]-[hash].js")
]

下面是 webpack 输出

Hash: 78d489a6e4aec65292b2  
Version: webpack 1.12.14
Time: 8161ms
                         Asset       Size  Chunks             Chunk Names
vendor-78d489a6e4aec65292b2.js     925 kB       0  [emitted]  vendor
index-78d489a6e4aec65292b2.js    1.87 kB       1  [emitted]  index
app-78d489a6e4aec65292b2.js    1.41 kB       2  [emitted]  app
index-78d489a6e4aec65292b2.css   83 bytes       1  [emitted]  index
vendor-78d489a6e4aec65292b2.js.map    1.05 MB       0  [emitted]  vendor
index-78d489a6e4aec65292b2.js.map     2.3 kB       1  [emitted]  index
index-78d489a6e4aec65292b2.css.map  107 bytes       1  [emitted]  index
app-78d489a6e4aec65292b2.js.map    1.76 kB       2  [emitted]  app
index.html  370 bytes          [emitted]  
app.html  311 bytes          [emitted]  
[0] multi vendor 64 bytes {0} [built]
+ 258 hidden modules
Child html-webpack-plugin for "index.html":
+ 3 hidden modules
Child html-webpack-plugin for "app.html":
+ 3 hidden modules
Child extract-text-webpack-plugin:
+ 2 hidden modules

在 Github 2191 中打开了此问题

将minChunks设置为 Infinity 似乎可以解决它。下面是代码。你也可以在这里得到一个工作的例子。

new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        minChunks: Infinity
    })
相关文章：