网页包 : multiple entry points

Question

我在看 this webpack 配置文件，我不太明白如果给出多个入口点会发生什么(如下例所示)。

入口点是否可以作为依赖项搜索的起点，然后结果依赖项的联合是捆绑包中的最终结果？

'use strict';

var webpack = require('webpack');

module.exports = {

    entry: [
        'webpack/hot/only-dev-server',
        './index.js'
    ],
    output: {
        path: __dirname + '/build',
        publicPath: __dirname  + "/build/",
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]


};

我看了 doc但它没有解释上述配置的作用。

此外，
here这个已经写完了:

If you pass an array: All modules are loaded upon startup. The last one is exported.

entry: ["./entry1", "./entry2"]

加载模块和导出模块有什么区别？

Answer 1

确切地!!

正如您在 this 上看到的那样例如，使用多个入口点，您可以从选定的入口点开始创建 2 个或更多包。但是，您可能会在捆绑包中复制(或更多)您的依赖项代码。目前，您的配置无需任何优化即可执行此任务。

在链接的示例中，它使用通用 block 插件创建另一个具有通用条目代码的包(在其他包之前包含)，这对于多页 webapp 很有用。

如果你想添加通用 block 插件，你可以简单地将这段代码添加到你的配置中:

plugins: [
    new CommonsChunkPlugin({
        filename: "commons.js",
        name: "commons"
    })
]

在 this页面可以找到更多示例(例如多个公共(public) block )

关于入口论点:

如果你传递一个字符串( entry: 'entry.js' )，webpack 从它开始创建一个包。

如果您传递一个数组 (entry: ['entry1.js', 'entry2.js'])，它会创建一个从 entry2 开始的包，命名为 entry2，然后加载(并解析)entry1。

如果您传递一个对象( entry: {entry1: 'entry1.js', entry2: 'entry2.js'} )，它会创建两个不同的包，从条目开始并命名为对象的条目键。

如果你使用这样的混合模式 entry: {entry1: 'entry1.js', entry2: ['entry2_1.js', 'entry2_2.js'] } , webpack 从 entry1.js 开始创建一个名为 entry1 的包，从 entry2_2.js 创建另一个名为 entry2 的包，但首先加载 entry2_1.js。

请注意，传递一个条目数组，仅导出最后一个，仅加载其他 js。